Install DevExtreme
Install the devextreme
and devextreme-angular
npm packages:
- npm install devextreme@24.2 devextreme-angular@24.2 --save --save-exact
Configure Webpack Loaders
Open the webpack.config.js
file and configure loaders to process CSS and fonts:
- ...
- rules: [
- ...
- {
- test: /\.css$/,
- use: [
- { loader: "style-loader" },
- { loader: "css-loader" }]
- }
- ]
- ...
In addition, open the package.json
file and ensure style-loader
, css-loader
, and url-loader
are listed in devDependencies
.
Import Stylesheets
Open the main .ts
file 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!');
- }
- }
If you have technical questions, please create a support ticket in the DevExpress Support Center.