Angular Menu - Getting Started
This tutorial shows how to add the Menu component to your application and configure the component's core features.
Each section in this tutorial describes a single configuration step. You can also find the full source code in the GitHub repository.
Create Base Menu Level
You can display Menu items from the items array or a data source. This tutorial uses the first technique. To see how to use the dataSource, refer to the following demo: Menu Overview Demo.
To create a base Menu level, define the component in the markup and populate it with items one by one. You can use predefined item properties to customize the items. For example, the code example below uses icon and text item properties. To further customize the appearance and content of items, use an itemTemplate to customize all items simultaneously or the item template property to customize individual items.
- <div id="container">
- <dx-menu>
- <dxi-item
- icon="home"
- >
- </dxi-item>
- <dxi-item
- text="About"
- >
- </dxi-item>
- <dxi-item
- text="Products"
- >
- </dxi-item>
- <dxi-item
- icon="cart"
- >
- </dxi-item>
- </dx-menu>
- </div>
- import { BrowserModule } from '@angular/platform-browser';
- import { NgModule } from '@angular/core';
- import { AppComponent } from './app.component';
- import { DxMenuModule } from "devextreme-angular";
- @NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule,
- DxMenuModule
- ],
- providers: [ ],
- bootstrap: [AppComponent]
- })
- export class AppModule { }
Create Submenus
To create a submenu, use nested items. A submenu is defined as another item in the base item's markup.
Use the beginGroup property to separate items in the submenu.
- <div id="container">
- <dx-menu>
- <!-- ... -->
- <dxi-item
- text="Products"
- >
- <dxi-item
- text="Product 1"
- >
- </dxi-item>
- <dxi-item
- text="Category"
- >
- <dxi-item
- text="Product 2"
- >
- </dxi-item>
- <dxi-item
- [beginGroup]="true"
- text="Product 3"
- >
- </dxi-item>
- <dxi-item
- text="Product 4"
- >
- </dxi-item>
- </dxi-item>
- <dxi-item
- [disabled]="true"
- text="Product 5"
- >
- </dxi-item>
- </dxi-item>
- <!-- ... -->
- </dx-menu>
- </div>
Handle Clicks on Items
To access the clicked item, use the onItemClick event handler function. The following code displays the clicked item's name in the console:
- <div id="container">
- <dx-menu
- (onItemClick)="onItemClick($event)"
- >
- <!-- ... -->
- </dx-menu>
- </div>
- import { Component } from '@angular/core';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css'],
- })
- export class AppComponent {
- onItemClick(e: any) {
- if (e.itemData.text) {
- console.log(e.itemData.text + ' has been clicked!');
- }
- else if (e.itemData.icon) {
- console.log(e.itemData.icon.charAt(0).toUpperCase() + e.itemData.icon.slice(1) + ' has been clicked!');
- }
- }
- }
Enable Menu Adaptivity
In adaptive render mode, the Menu is shown as a list icon, and Menu items are arranged hierarchically like TreeView items. This functionality is in effect only if the container's width is less than the Menu width. Set the adaptivityEnabled property to true to enable adaptive rendering.
In the code below, the CheckBox toggles Menu render mode.
- <div id="container">
- <dx-menu
- [adaptivityEnabled]="toggle"
- >
- <!-- ... -->
- </dx-menu>
- </div>
- <dx-check-box
- text="Enable adaptivity"
- (onValueChanged)="onValueChanged($event)"
- >
- </dx-check-box>
- import { Component } from '@angular/core';
- @Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css'],
- })
- export class AppComponent {
- // ...
- toggle: boolean = false;
- onValueChanged(e: any) {
- this.toggle = e.value;
- }
- }
- import { BrowserModule } from '@angular/platform-browser';
- import { NgModule } from '@angular/core';
- import { AppComponent } from './app.component';
- import { DxMenuModule, DxCheckBoxModule } from "devextreme-angular";
- @NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule,
- DxMenuModule,
- DxCheckBoxModule
- ],
- providers: [ ],
- bootstrap: [AppComponent]
- })
- export class AppModule { }
- #container {
- width: 200px;
- height: 140px;
- }
If you have technical questions, please create a support ticket in the DevExpress Support Center.