DevExtreme Angular - Create and Configure a Widget

Angular integration is supplied as an extension to DevExtreme that is available in the DevExtreme-Angular GitHub repository. This guide assumes that you already have NodeJS and npm installed on your machine.

Before adding a DevExtreme widget to your application, install devextreme and devextreme-angular npm packages.

npm install --save devextreme devextreme-angular

Then, import DevExtreme modules within the main .ts file (usually src/app.module.ts).

...
import { DxButtonModule } from "devextreme-angular";

@NgModule({ 
    ... 
    imports: [ 
        ... 
        DxButtonModule, 
        ... 
    ] 
})
export class AppModule {}

You can import DevExtremeModule, which includes all DevExtreme components, but we recommend that you import only those modules that contain the required functionality (for example, DxButtonModule) to decrease the startup time and the size of the final bundle.

The imported modules contain components that create DevExtreme widgets. For instance, the dx-button component creates the Button widget, dx-range-slider creates the RangeSlider, etc. The following code demonstrates how to add the Button widget to the template of the "my-app" component.

@Component({
    selector: 'my-app',
    template: '<dx-button text="Press me" (onClick)="helloWorld()"></dx-button>'
})
export class AppComponent {
    helloWorld() {
        alert('Hello world!');
    }
}

You can initialize widget options with a string value or the value of a component property. For example, the following code initializes the text option with a string value, the type option with the value of the buttonType component property.

@Component({
    selector: 'my-app',
    template: '<dx-button text="Press me" [type]="buttonType"></dx-button>'
})
export class AppComponent {
    buttonType: string = 'default';
}

For more information on using DevExtreme widgets with Angular, refer to the DevExtreme-Angular README on GitHub.

DevExtreme supports server-side rendering, which can be used to speed up loading your application. See DevExtreme-Angular README's Server-side Rendering section for more information.

View Demo

See Also

• API Reference.WidgetName.Configuration, for example, API Reference.Button.Configuration
• Change Options
• DevExtreme-Angular on GitHub