Creating an application DevExtreme

If you start a project from scratch, then use DevExtreme Angular template. Generating a menu item with the navigation and in response to several exemplary view corresponding layout.

You can use DevExtreme CLI build the application:

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

Note

npx need npm v5.2 or higher. If the previous version, either upgrade npm either install a global DevExtreme CLI and run the following command to install the package:

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

The program already contains a DataGrid component. The guide below demonstrates how to add other DevExtreme components, with the Button component to give an example:

In place of the use, introduced in NgModule DevExtreme assembly module. Open src / app / app-routing.module.ts file, add the following code:
App-routing.module.ts

// ...
import { ..., DxButtonModule } from 'devextreme-angular';
 
@NgModule({
    imports: [ ..., DxButtonModule ],
    // ...
})
export class AppModule { }

Configuring DevExtreme component tag. Add the following to src / app / pages / home / home.component.html file:
home.component.html

<!-- ... -->
<dx-button
    text="Click me"
    (onClick)="helloWorld()">
</dx-button>
<!-- ... -->

Angular stated in DevExtreme callback function, event handler, binding properties. This example onClick event handler in src / app / pages / home / home.component.ts file:
home.component.ts

// ...
export class HomeComponent {
    helloWorld() {
        alert('Hello world!');
    }
}

You point the Home page, you can see the button.