DevExtreme Angular - Overview

The Toolbar is a widget containing items that usually manage screen content. Those items can be plain text or widgets.

View Demo

The following code adds a simple Toolbar to your page. Three items are plain text and one is a Button widget.

HTML
TypeScript
  • <dx-toolbar>
  • <dxi-item
  • widget="dxButton"
  • location="before"
  • [options]="{
  • type: 'back',
  • text: 'Back'
  • }">
  • </dxi-item>
  • <dxi-item
  • text="Add"
  • locateInMenu="always">
  • </dxi-item>
  • <dxi-item
  • text="Change"
  • locateInMenu="always">
  • </dxi-item>
  • <dxi-item
  • text="Products"
  • location="center">
  • </dxi-item>
  • </dx-toolbar>
  • import { DxToolbarModule, DxButtonModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxToolbarModule,
  • DxButtonModule
  • ],
  • // ...
  • })

Note that all data source objects in the code above follow the Default Item Template pattern. This provides a default appearance for toolbar items, which can be customized later.

See Also