DevExtreme Angular - Add DevExtreme to an Angular CLI Application

To start this tutorial, you need an Angular 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@24.2 devextreme-angular@24.2 --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 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.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).

index.html

<html lang="en">
    <head>
        <!-- ... -->
    </head>
    <body class="dx-viewport">
        <app-root></app-root>
    </body>
</html>

NOTE

SVG-based UI components do not require theme stylesheets. If you choose to reference the stylesheets, the UI components apply an appearance that matches them.

Register 3rd-Party Dependencies

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:

tsconfig.json

{
  ...
  "compilerOptions": {
    ...
    "paths": {
      "jszip": [
        "node_modules/jszip/dist/jszip.min.js"
      ]
    }
  }
}

Globalize Registration

IMPORTANT

The Globalize package is outdated and potentially insecure. Reports from the Snyk security checker highlight vulnerabilities associated with this package.

Use Globalize at your own risk. In v25.1, we will remove Globalize from our installation, templates, and demos. We recommend switching to Intl for a more secure solution.

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 TypeScript configuration file...

tsconfig.app.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/*"
      ]
    }
  }
}

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

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.

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

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.

Demos and Code Examples

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