DevExtreme Angular - Add DevExtreme to an Angular CLI Application

To start this tutorial, you need an Angular 5+ 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
NOTE

npx is available with npm v5.2 and later. If you have an earlier version, upgrade npm or install the DevExtreme CLI globally and run the command from the installed package:

npm i -g 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, follow the instructions below for manual setup.

Install DevExtreme

Install the devextreme and devextreme-angular npm packages:

npm install devextreme@19.1 devextreme-angular@19.1 --save --save-exact
NOTE
We recommend saving an exact version of DevExtreme to avoid unexpected updates because DevExtreme does not use Semantic Versioning. In our versioning system, the first and middle numbers indicate a major release which may contain behavior changes.

Configure Stylesheets

Open the angular.json file and reference dx.common.css and a predefined theme stylesheet (dx.light.css in the code below).

angular.json
{
  "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"
            ],
            ...
          },
          ...
        },
        ...
      }
    },
    ...
  },
  ...
}

For Angular CLI before 6, modify the angular-cli.json file instead:

angular-cli.json
{
  "apps": [{
    "styles": [
      ...
      "../node_modules/devextreme/dist/css/dx.common.css",
      "../node_modules/devextreme/dist/css/dx.light.css",
      "styles.css"
    ],
    ...
  }],
  ...
}
NOTE
SVG-based widgets do not require theme stylesheets. If you do reference the stylesheets, the widgets apply an appearance that matches them.

Register 3rd-Party Dependencies in Angular CLI 6+

JSZip Registration

If you want to use the DataGrid widget, register the JSZip library in the tsconfig.json file. The widget uses this library for client-side export to Excel.

tsconfig.json
{
  ...
  "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...

tsconfig.json
{
  ...
  "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/*"
      ],
      "jszip": [
        "node_modules/jszip/dist/jszip.min.js"
      ]
    }
  }
}

... and create a typings.d.ts file in the src folder with ambient declarations for Globalize, DevExtreme localization messages, and devextreme-cldr-data:

typings.d.ts
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;
}

In projects created with Angular CLI version 5 and earlier, configure config.js as follows instead:

config.js
System.config({
    // ...
    paths: {
        "npm:": "node_modules/"
    },
    map: {
        // ...
        "globalize": "npm:globalize/dist/globalize",
        "cldr": "npm:cldrjs/dist/cldr",
        "cldr-data": "npm:cldr-data",
        "json": "npm:systemjs-plugin-json/json.js",
    },
    packages: {
        app: {
            // ...
            "globalize": {
                main: "../globalize.js",
                defaultExtension: "js"
            },
            "cldr": {
                main: "../cldr.js",
                defaultExtension: "js"
            }
        }
    }
});

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 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.

app.module.ts
// ...
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 component in your application:

app.component.html
app.component.ts
<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.

Demos and Code Examples

Refer to the following resources for code samples and usage examples: