How To Use Devextreme In Angular?

DevExtreme is a collection of enterprise-ready Angular, React, Vue, and jQuery UI component suites. It includes everything you’ll need to build responsive web apps for touch devices and standard PCs, including a data grid, interactive charts, data editors, navigation, and multi-purpose widgets.

install a Devextreme in anguler

npx -p devextreme-cli devextreme add devextreme-angular
npm run start

This command does the following:

• Adds the devextreme and devextreme-angular npm packages to the dependencies in package.json and installs their latest versions.
• References the dx.light.css DevExtreme stylesheet in angular.json.

Import the DevExtreme UI component module into the NgModule where it will be used.

// ...
import { ..., DxButtonModule } from 'devextreme-angular';
 
@NgModule({
    imports: [ ..., DxButtonModule ],
    // ...
})
export class AppModule { }

Configure the DevExtreme UI component in the markup,

Static String Property Value 

app.component.html

<dx-button text="Simple button"></dx-button>

app.module.ts

import { DxButtonModule } from 'devextreme-angular';

Properties of the Object Type

Use UI components prefixed with dxo- (“o” stands for “object”). In the following example, we configure the TreeMap’s tooltip property:

<dx-tree-map>
    <dxo-tooltip
        [enabled]="true"
        format="thousands">
    </dxo-tooltip>
</dx-tree-map>

Collections

Use UI components that begin with dxi- (“i” stands for “item”). The following example demonstrates how to set the columns property of the DataGrid

<dx-data-grid>
    <dxi-column dataField="firstName" caption="First Name"></dxi-column>
    <dxi-column dataField="lastName" caption="Last Name" [visible]="false"></dxi-column>
</dx-data-grid>

The dxi-item dxi-element is used to define elements in collection UI components. It supports the structural directives offered by Angular, such as ngFor. The code below demonstrates how to define items in the List UI component using dxi-item.

In addition, dxi-item provides directives that affect aspects of item presentation, such as badge in the code below. Each collection UI component’s items section describes them.

app.component.html

<dx-list>
    <dxi-item>
        <h1>Available items</h1>
    </dxi-item>
    <dxi-item *ngFor="let item of listItems" [badge]="item.badge">
        <h2>{{item.text}}</h2>
    </dxi-item>
</dx-list>

app.component.ts

// ...
export class AppComponent {
    listItems = [{
        text: 'Cars',
        badge: '12'
    }, {
        text: 'Bikes',
        badge: '5'
    }];
}

Event Handling

<dx-button
     text="OK"
    (onClick)="okClicked($event)">
</dx-button>

In nested components, the () syntax cannot be used. Use the [] syntax instead:

app.component.html

<dx-data-grid>
    <dxi-column type="buttons">
        <dxi-button
            [onClick]="okClicked">
        </dxi-button>
    </dxi-column>
</dx-data-grid>

app.component.ts

import notify from "devextreme/ui/notify";
// ...
export class AppComponent {
    okClicked (e) {
        notify("The OK button was clicked")
    }
}

Callback Functions

app.component.html

<dx-vector-map>
    <dxi-layer
        [customize]="customizeLayers">
    </dxi-layer>
</dx-vector-map>

here defines a customizeLayers function but not use ( ).

Callback functions are executed outside the component’s context. If the context is important, explicitly bind the callback function to it in the constructor.

// ...
export class AppComponent {
    myCountry: string = "USA"; // we need to access this context variable in the callback function
 
    constructor() {
        this.customizeLayers = this.customizeLayers.bind(this);
    }
 
    customizeLayers(elements) {
        let country = this.myCountry;
        // ...
    }
}

One-Way Property Binding

Changes in the bindingProperty are propagated to TextBox’s value, but not vice versa. like.

<dx-text-box [value]="bindingProperty"></dx-text-box>

Two-Way Property Binding

Changes in the bindingProperty are propagated to the TextBox’s value and vice versa:

app.component.html

<dx-text-box [(value)]="bindingProperty"></dx-text-box>

app.component.ts

// ...
export class AppComponent {
    bindingProperty: string = "Some value";
}