Install DevExtreme
Install the devextreme
and devextreme-angular
npm packages:
npm install devextreme@19.1 devextreme-angular@19.1 --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" }] }, { test: /\.(eot|svg|ttf|woff|woff2)$/, use: "url-loader?name=[name].[ext]" } ] ...
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 dx.common.css
and a predefined theme stylesheet (dx.light.css
in the code below).
// ... import 'devextreme/dist/css/dx.common.css'; import 'devextreme/dist/css/dx.light.css';
Import DevExtreme Modules
Go to the NgModule
in which you are going to use DevExtreme 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 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!'); } }
If you have technical questions, please create a support ticket in the DevExpress Support Center.