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:
Import the DevExtreme component's module in the
NgModule
where you are going to use it. Open thesrc\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 { }
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> <!-- ... -->
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.