Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.

Create a DevExtreme Application

If you are starting a project from scratch, use the DevExtreme Angular Template. It is a simple application with a navigation menu and several sample views in a responsive layout (see live preview).

You can generate this application with the DevExtreme CLI:

npx -p devextreme-cli devextreme new angular-app app-name
cd app-name
npm run start

The application already contains the DataGrid and Form components. You can find their configurations in the src\pages\display-data\display-data.component.html and src\pages\profile\profile.component.html files correspondingly. The following instructions show how to employ any other DevExtreme component using the Button component as an example:

  1. Import the DevExtreme component's module in the NgModule where you are going to use it. Open the src\app\app-routing.module.ts file and add the following code:

    // ...
    import { ..., DxButtonModule } from 'devextreme-angular';
        imports: [ ..., DxButtonModule ],
        // ...
    export class AppModule { }
  2. Configure the DevExtreme component in the markup. Add the following code to the src\app\pages\home\home.component.html file:

    <!-- ... -->
        text="Click me"
    <!-- ... -->
  3. Declare callback functions, event handlers, and binding properties for DevExtreme components in the Angular component. In this example, we declare the onClick event handler in the src\app\pages\home\home.component.ts file:

    // ...
    export class AppComponent {
        helloWorld() {
            alert('Hello world!');

If you go to the Home view in the browser, you should see the Button.

For further information about DevExtreme Angular components, refer to the following resources:

For more information about the structure and contents of the DevExtreme Angular Template, refer to the DevExtreme Application Template article.