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.

You can generate the application with the DevExtreme CLI:

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

npm i -g devextreme-cli
devextreme new angular-app app-name

The application already contains the DataGrid and Form components. 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.

The following resources provide more information about DevExtreme Angular components:

• Component Configuration Syntax
• Demos
• API Reference