Install DevExtreme
Install the devextreme
and devextreme-angular
npm packages:
- npm install devextreme@24.2 devextreme-angular@24.2 --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
If you use standalone components, import the modules as shown below:
- import { Component } from '@angular/core';
- import { DxButtonModule } from 'devextreme-angular';
- @Component({
- selector: 'app-root',
- standalone: true,
- imports: [DxButtonModule],
- templateUrl: './app.component.html',
- styleUrl: './app.component.css'
- })
- export class AppComponent { }
If you use NgModule
, import the DevExtreme modules as demonstrated in the following code snippet. If tree shaking is configured in your application, import the modules from devextreme-angular
. If not, import them from 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>
- // ...
- 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.