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 UI 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 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:

• Component Configuration Syntax
• Demos
• API Reference

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