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:
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:
// 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:
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>
If you have technical questions, please create a support ticket in the DevExpress Support Center.