DevExtreme Angular - 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 devextreme-cli new angular-app app-name
cd app-name
npm run start

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

  1. Import the DevExtreme UI 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 UI 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 in the application class. 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.