DevExtreme Angular - Add DevExtreme to an Angular CLI Application
To start this tutorial, you need an Angular 7+ application created using the Angular CLI. Refer to the Angular CLI documentation for information on how to create such an application. You can also create an Angular application with DevExtreme already added to it.
One-Command Setup
You can install and configure DevExtreme and its dependencies with a single npx command that is part of the DevExtreme CLI:
npx -p devextreme-cli devextreme add devextreme-angular
After you run the command, you can skip the following articles and move on straight to importing DevExtreme modules.
If the command is unavailable for any reason or if you need an older version, follow the instructions below for manual setup.
Install DevExtreme
Install the devextreme
and devextreme-angular
npm packages:
npm install devextreme@20.1 devextreme-angular@20.1 --save --save-exact
Configure Stylesheets
Open the angular.json
file and reference dx.common.css
and a predefined theme stylesheet (dx.light.css
in the code below).
{ "projects": { "ProjectName": { "architect": { "build": { "options": { "styles": [ "node_modules/devextreme/dist/css/dx.common.css", "node_modules/devextreme/dist/css/dx.light.css", "src/styles.css" ], ... }, ... }, ... } }, ... }, ... }
Then, go to the src
folder, open the index.html
file, and add the dx-viewport
class to the <body>
tag. This ensures that theme colors and typography settings are applied to all page elements (and not only to DevExtreme UI components).
<html lang="en"> <head> <!-- ... --> </head> <body class="dx-viewport"> <app-root></app-root> </body> </html>
JSZip Registration
DevExtreme requires the JSZip library. Since JSZip v3.3.0, the library does not need to be registered. If you use an earlier version, register JSZip in the tsconfig.json
file:
{ ... "compilerOptions": { ... "paths": { "jszip": [ "node_modules/jszip/dist/jszip.min.js" ] } } }
Globalize Registration
If you want to use Globalize for localization, install it and the devextreme-cldr-data
extension:
npm install --save-dev devextreme-cldr-data globalize
Then, register the Globalize and CLDR scripts in the tsconfig.json
file...
{ ... "compilerOptions": { ... "paths": { "globalize": [ "node_modules/globalize/dist/globalize" ], "globalize/*": [ "node_modules/globalize/dist/globalize/*" ], "cldr": [ "node_modules/cldrjs/dist/cldr" ], "cldr/*": [ "node_modules/cldrjs/dist/cldr/*" ] } } }
... and create a typings.d.ts
file in the src
folder with ambient declarations for Globalize, DevExtreme localization messages, and devextreme-cldr-data
:
declare module 'globalize' { const value: any; export default value; } declare module 'devextreme/localization/messages/*' { const value: any; export default value; } declare module 'devextreme-cldr-data/*' { const value: any; export default value; }
Refer to the Using Globalize article for usage examples.
Alternatively, you can use Intl as a more lightweight localization solution.
Import DevExtreme Modules
Go to the NgModule
in which you are going to use DevExtreme UI components and import the required DevExtreme modules. Note that if tree shaking is configured in your application, you can import the modules from devextreme-angular
. Otherwise, you should import them from specific files.
// ... import { DxButtonModule } from 'devextreme-angular'; // or if tree shaking is not configured // import { DxButtonModule } from 'devextreme-angular/ui/button'; @NgModule({ imports: [ // ... DxButtonModule ], // ... }) export class AppModule { }
Now you can use the DevExtreme UI component in your application:
<dx-button text="Click me" (onClick)="helloWorld()"> </dx-button>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { helloWorld() { alert('Hello world!'); } }
Run the Application
Run the application with the following command:
ng serve
Open http://localhost:4200/ to browse the application.
Add the DevExtreme Layout (Optional)
You can use the DevExtreme CLI to add the DevExtreme layout template to your application. Refer to the following help topic for more information: Add the DevExtreme Layout to an Existing Application.
If you have technical questions, please create a support ticket in the DevExpress Support Center.