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.
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
npx is available with npm v5.2 and later. If you have an earlier version, upgrade npm or install the DevExtreme CLI globally and run the command from the installed package:
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:
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.
The following resources provide more information about DevExtreme Angular components:
If you have technical questions, please create a support ticket in the DevExpress Support Center.