Install DevExtreme
Install the devextreme
and devextreme-angular
npm packages:
npm install devextreme@22.1 devextreme-angular@22.1 --save --save-exact
Import Stylesheets
Open the global.scss
file in the src
folder and import a predefined theme stylesheet (dx.light.css
in the code below).
@import '~devextreme/dist/css/dx.light.css';
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!'); } }
Register 3rd-Party Dependencies
The DataGrid UI component and Globalize localization require additional libraries. Follow the instructions from the Register 3rd-Party Dependencies article for Angular.
Run the Application
Run the application with the following command:
ionic serve
Open http://localhost:8100/ to browse the application.
If you have technical questions, please create a support ticket in the DevExpress Support Center.