DevExtreme Angular - Using Webpack

NOTE
This tutorial is intended for use with the latest version of Webpack. Compatibility with earlier versions is not guaranteed.

Install DevExtreme

Install the devextreme and devextreme-angular npm packages:

npm install devextreme@25.1 devextreme-angular@25.1 --save --save-exact
NOTE
We recommend saving an exact version of DevExtreme to avoid unexpected updates because DevExtreme does not use Semantic Versioning. In our versioning system, the first and middle numbers indicate a major release which may contain behavior changes.

Configure Webpack Loaders

Open the webpack.config.js file and configure loaders to process CSS and fonts:

webpack.config.js
...
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).

TypeScript
// ...
import 'devextreme/dist/css/dx.light.css';
NOTE
SVG-based UI components do not require theme stylesheets. If you choose to import the stylesheets, the UI components apply an appearance that matches them.

Import DevExtreme Modules

DevExtreme components are standalone. Import them as follows:

app.component.ts
import { Component } from '@angular/core';
import { DxButtonComponent } from 'devextreme-angular/ui/button';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [DxButtonComponent],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent { }

The nested components should also be imported. For example, the following code snippet imports DataGrid, its columns, sorting, and a template.

NOTE
If you use *dxTemplate, import DxTemplateDirective.
app.component.ts
app.component.html
import { Component } from '@angular/core';
import { DxTemplateDirective } from 'devextreme-angular';
import { DxDataGridComponent, DxiDataGridColumnComponent } from 'devextreme-angular/ui/data-grid';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [DxDataGridComponent, DxiDataGridColumnComponent, DxTemplateDirective],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent { }
<dx-data-grid>
    <dxo-data-grid-sorting mode="none"></dxo-data-grid-sorting>
    <dxi-data-grid-column dataField="date"></dxi-data-grid-column>
    <dxi-data-grid-column 
        caption="Employee"
        cellTemplate="employeeTemplate"
    ></dxi-data-grid-column>
    <div *dxTemplate="let data of 'employeeTemplate'">
        <img
            [src]="data.value"
            alt="Picture of {{ data.data.FirstName }} {{ data.data.LastName }}"
        />
    </div>
</dx-data-grid>

Modules facilitate working with multiple configuration components. You can import them as follows:

!-- tab: app.component.ts -->
import { Component } from '@angular/core';
import { DxDataGridModule } from 'devextreme-angular';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [DxDataGridModule],
    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.

app.module.ts
// ...
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:

app.component.html
app.component.ts
<dx-button
    text="Click me"
    (onClick)="helloWorld()">
</dx-button>
// ...
export class AppComponent {
    helloWorld() {
        alert('Hello world!');
    }
}

Run the Application

Build the application with the following command:

webpack

... and open the HTML file where your bundle is referenced (usually index.html) in your browser.

Demos and Code Examples

Refer to the following resources for code samples and usage examples: