This section explains how to create a simple Menu, and demonstrate the basic usage of the Menu module in an Angular environment.
The list of dependencies required to use the Menu module in your application is given below:
|-- @syncfusion/ej2-angular-navigations
|-- @syncfusion/ej2-angular-base
|-- @syncfusion/ej2-navigations
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-data
|-- @syncfusion/ej2-lists
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-splitbuttons
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-buttonsYou can use Angular CLI to setup your Angular applications. To install Angular CLI use the following command.
npm install -g @angular/cliStart a new Angular application using below Angular CLI command.
ng new my-app
cd my-appSyncfusion packages are distributed in npm as @syncfusion scoped packages. You can get all the Angular Syncfusion package from npm link.
Currently, Syncfusion provides two types of package structures for Angular components,
Syncfusion Angular packages(>=20.2.36) has been moved to the Ivy distribution to support the Angular Ivy rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.
Add @syncfusion/ej2-angular-navigations package to the application.
npm install @syncfusion/ej2-angular-navigations --saveFor Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion Angular components. To download the ngcc package use the below.
Add @syncfusion/ej2-angular-navigations@ngcc package to the application.
npm install @syncfusion/ej2-angular-navigations@ngcc --saveTo mention the ngcc package in the package.json file, add the suffix -ngcc with the package version as below.
@syncfusion/ej2-angular-navigations:"20.2.38-ngcc"Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning.
Import Menu module into Angular application(app.module.ts) from the package
@syncfusion/ej2-angular-navigations.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// Imported Syncfusion menu module from navigations package.
import { MenuModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule, MenuModule], // Registering EJ2 Menu Module.
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }Modify the template in app.component.ts file with ejs-menu to render the Menu
component.
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuItemModel } from '@syncfusion/ej2-angular-navigations';
enableRipple(true);
@Component({
selector: 'app-root',
template: `<!-- To Render Menu. -->
<ejs-menu [items]='menuItems'></ejs-menu>`
})
export class AppComponent {
public menuItems: MenuItemModel[] = [
{
text: 'File',
items: [
{ text: 'Open' },
{ text: 'Save' },
{ text: 'Exit' }
]
},
{
text: 'Edit',
items: [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
]
},
{
text: 'View',
items: [
{ text: 'Toolbar' },
{ text: 'Sidebar' }
]
},
{
text: 'Tools',
items: [
{ text: 'Spelling & Grammar' },
{ text: 'Customize' },
{ text: 'Options' }
]
},
{ text: 'Go' },
{ text: 'Help' }
];
}Add Menu component’s styles as given below in style.css.
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';Run the application in the browser using the following command:
ng serveThe following example shows a basic Menu component.
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuItemModel } from '@syncfusion/ej2-angular-navigations';
enableRipple(true);
@Component({
selector: 'app-root',
template: `<!-- To Render Menu. -->
<ejs-menu [items]='menuItems'></ejs-menu>`
})
export class AppComponent {
public menuItems: MenuItemModel[] = [
{
text: 'File',
items: [
{ text: 'Open' },
{ text: 'Save' },
{ text: 'Exit' }
]
},
{
text: 'Edit',
items: [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
]
},
{
text: 'View',
items: [
{ text: 'Toolbar' },
{ text: 'Sidebar' }
]
},
{
text: 'Tools',
items: [
{ text: 'Spelling & Grammar' },
{ text: 'Customize' },
{ text: 'Options' }
]
},
{ text: 'Go' },
{ text: 'Help' }
];
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MenuModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule, MenuModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);This example demonstrates the basic rendering of Menu with items support. For more information about data source support, refer to the
Data Source Bindingsection.
The separators are both horizontal and vertical lines used to separate the menu items.
You cannot select the separators, but you can enable separators to group the menu items
using the separator property.
The Open and Save sub menu items are grouped using the separator property in the following sample.
import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuItemModel } from '@syncfusion/ej2-angular-navigations';
enableRipple(true);
@Component({
selector: 'app-root',
template: `<!-- To Render Menu. -->
<ejs-menu [items]='menuItems'></ejs-menu>`
})
export class AppComponent {
public menuItems: MenuItemModel[] = [
{
text: 'File',
items: [
{ text: 'Open' },
{ text: 'Save' },
{ separator: true },
{ text: 'Exit' }
]
},
{
text: 'Edit',
items: [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
]
},
{
text: 'View',
items: [
{ text: 'Toolbar' },
{ text: 'Sidebar' },
{ text: 'Full Screen' }
]
},
{
text: 'Tools',
items: [
{ text: 'Spelling & Grammar' },
{ text: 'Customize' },
{ text: 'Options' }
]
},
{ text: 'Go' },
{ text: 'Help' }
];
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MenuModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule, MenuModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);The
separatorproperty should not be given along with the other fields in theMenuItemModel. You can also enable the separator to group horizontal menu items.