Install DevExtreme
Install the devextreme
and devextreme-angular
npm packages:
npm install devextreme@20.1 devextreme-angular@20.1 --save --save-exact
Configure SystemJS
Open the config.js
file and configure DevExtreme and its dependencies as follows:
System.config({ // ... paths: { "npm:": "node_modules/" }, map: { // ... 'devextreme': 'npm:devextreme', 'devextreme-angular': 'npm:devextreme-angular', // for client-side Excel export in the PivotGrid UI component 'jszip': 'npm:jszip/dist/jszip.min.js', // for the HtmlEditor UI component 'quill': 'npm:quill/dist/quill.min.js', 'quill-delta-to-html': 'npm:quill-delta-to-html/dist/browser/QuillDeltaToHtmlConverter.bundle.js' }, packages: { // ... 'devextreme': { defaultExtension: 'js' }, 'devextreme-angular': { main: 'index.js', defaultExtension: 'js' } } });
Reference Stylesheets
Open the index.html
file and reference dx.common.css
and a predefined theme stylesheet (dx.light.css
in the code below).
<head> <!-- ... --> <link rel="stylesheet" href="node_modules/devextreme/dist/css/dx.common.css"> <link rel="stylesheet" href="node_modules/devextreme/dist/css/dx.light.css"> <!-- ... --> </head>
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:
npm start
Open http://127.0.0.1:8080/ to browse the application.
If you have technical questions, please create a support ticket in the DevExpress Support Center.