Add DevExtreme to Angular 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.

A key installation

You can install and configure DevExtreme associated with dependence npx DevExtreme CLI command npx is part of:

npx -p devextreme-cli devextreme add devextreme-angular

note

npx valid on npm v5.2 and later. If you are using an earlier version, upgrade or install npm global DevExtreme CLI, and then run the command:

npm i -g devextreme-cli
devextreme add devextreme-angular

After you run the command, you can skip the following article directly into DevExtreme module.

If the command is not available for some reason, the following instructions can be used to manually configure.

Installation DevExtreme

Installation devextreme devextreme-angular with a npm package:

npm install [email protected] [email protected] --save --save-exact

note

Because DevExtreme not using Semantic version management, we recommend using the specified version of DevExtreme, prevent unnecessary upgrades. Our version management system, the first and middle number represents the major version, including behavioral changes.

Configure style sheet

Open angular.json, introduced dx.common.css predefined themes and style sheets (dx.light.css).

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 previous version 6 Angular CLI, to modify the angular-cli.json follows:

angular-cli.json

{
  "apps": [{
    "styles": [
      ...
      "../node_modules/devextreme/dist/css/dx.common.css",
      "../node_modules/devextreme/dist/css/dx.light.css",
      "styles.css"
    ],
    ...
  }],
  ...
}

note

Theme Styles do not need the SVG-based widget. If you refer to these styles, the widget application matching appearance.

Angular CLI 6+ rely on third-party registered

JSZip registration

If you want to use DataGrid widget, registered JSZip library tsconfig.json years. This widget uses the library at client exported Excel.

tsconfig.json

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

Global registration

If you want to localize the language, you must install this package and devextreme-cldr-data extension:

npm install --save-dev devextreme-cldr-data globalize

Then Sign Language Packs and CLDR script scripts in tsconfig.json in ......

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"
      ]
    }
  }
}

...... then create typings.d.ts file in the src, Globalize, DevExtreme local news, 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;
}

Use Angular CLI 5 or earlier version of the project, config.js configuration is as follows:

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"
            }
        }
    }
});

Reference article uses the example of globalization.

Further, use of such lighter Intl localization program.

Import module DevExtreme

Find NgModule will use DevExtreme components, import needs DevExtreme module. Note that, if the application is configured to shake the tree, the module may be introduced devextreme-angular. Otherwise, you want a specific file to import them.

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 { }

You can now use DevExtreme components in your application:

app.component.htmlapp.component.ts

<dx-button
    text="Click me"
    (onClick)="helloWorld()">
</dx-button>

Run the application

Command to run the application as follows:

ng serve
Open http://localhost:4200/ to browse the application