DevExtreme Angular - TypeScript Support

TypeScript is a primary language for Angular development. This help topic outlines additional TypeScript specifics related to development with DevExtreme components.

Component Specific Types

To get component-specific types, import the DxComponentTypes declaration where Component is the component name:

app.component.ts
app.component.html
import { Component } from '@angular/core';
import { DxDateBoxTypes } from 'devextreme-angular/ui/date-box';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    dateType: DxDateBoxTypes.DateType = "datetime";
}
<dx-date-box ...
    [type]="dateType"
>
</dx-date-box>

If you need the same type for multiple components, you can import that type from the common submodule:

app.component.ts
// In the sample below, ValidationRule is imported for each component:

import { Component } from '@angular/core';
import { DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
import { DxFormTypes } from 'devextreme-angular/ui/form';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    dataGridValidationRule: DxDataGridTypes.ValidationRule;
    formValidationRule: DxFormTypes.ValidationRule;
}

// In the sample below, ValidationRule is imported from the common submodule:

import { Component } from '@angular/core';
import { ValidationRule } from 'devextreme/common';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    dataGridValidationRule: ValidationRule;
    formValidationRule: ValidationRule;
}

Generics Usage

DevExtreme supports Generics for properties and methods that operate internal data. You can use Generics inside event handlers and to define instances of data-aware components like DataGrid:

app.component.ts
app.component.html
import { Component, ViewChild } from '@angular/core';
import { DxDataGridComponent, DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
import { Employee } from './data';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    @ViewChild(DxDataGridComponent) dataGrid!: DxDataGridComponent<Employee, number>;

    onEditorPreparing(e: DxDataGridTypes.EditorPreparingEvent<Employee, number>) {
        if (e.dataField === 'LastName' && e.parentType === 'dataRow') {
            e.editorOptions.disabled = e.row?.data && e.row?.data.FirstName === '';
        }
    }

    onButtonClick() {
        const keys: number[] = this.dataGrid.instance.getSelectedRowKeys();
    }
}
<dx-button
    text="Get Selected Keys"
    (onClick)="onButtonClick()"
>
</dx-button>
<dx-data-grid ...
    (onEditorPreparing)="onEditorPreparing($event)"
>
</dx-data-grid>