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:

    app-routing.module.ts
    // ...
    import { ..., DxButtonModule } from 'devextreme-angular';
    
    @NgModule({
        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:

    home.component.html
    <!-- ... -->
    <dx-button
        text="Click me"
        (onClick)="helloWorld()">
    </dx-button>
    <!-- ... -->
  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:

    home.component.ts
    // ...
    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.