In this article, we will learn how to use tiered menu using PrimeNG in angular.
– First of all, we have to create a Angular application.
– TieredMenu displays submenus in nested overlays.
– TieredMenu uses the common menumodel api to define its items, visit MenuModel API for details.
– First need to add the below code in app.module.ts file
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {RouterModule} from '@angular/router'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; import { TieredMenuModule } from 'primeng/tieredmenu'; import { ButtonModule } from 'primeng/button'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, TieredMenuModule, ButtonModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
– Now we have to add the below code in app.component.ts file
import { Component,OnInit,ViewEncapsulation } from '@angular/core'; import {MenuItem} from 'primeng/api'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { items: MenuItem[]; ngOnInit() { this.items = [ { label:'File', icon:'pi pi-fw pi-file', items:[ { label:'New', icon:'pi pi-fw pi-plus', items:[ { label:'Bookmark', icon:'pi pi-fw pi-bookmark' }, { label:'Video', icon:'pi pi-fw pi-video' }, ] }, { label:'Delete', icon:'pi pi-fw pi-trash' }, { separator:true }, { label:'Export', icon:'pi pi-fw pi-external-link' } ] }, { label:'Edit', icon:'pi pi-fw pi-pencil', items:[ { label:'Left', icon:'pi pi-fw pi-align-left' }, { label:'Right', icon:'pi pi-fw pi-align-right' }, { label:'Center', icon:'pi pi-fw pi-align-center' }, { label:'Justify', icon:'pi pi-fw pi-align-justify' }, ] }, { label:'Users', icon:'pi pi-fw pi-user', items:[ { label:'New', icon:'pi pi-fw pi-user-plus', }, { label:'Delete', icon:'pi pi-fw pi-user-minus', }, { label:'Search', icon:'pi pi-fw pi-users', items:[ { label:'Filter', icon:'pi pi-fw pi-filter', items:[ { label:'Print', icon:'pi pi-fw pi-print' } ] }, { icon:'pi pi-fw pi-bars', label:'List' } ] } ] }, { label:'Events', icon:'pi pi-fw pi-calendar', items:[ { label:'Edit', icon:'pi pi-fw pi-pencil', items:[ { label:'Save', icon:'pi pi-fw pi-calendar-plus' }, { label:'Delete', icon:'pi pi-fw pi-calendar-minus' }, ] }, { label:'Archieve', icon:'pi pi-fw pi-calendar-times', items:[ { label:'Remove', icon:'pi pi-fw pi-calendar-minus' } ] } ] }, { separator:true }, { label:'Quit', icon:'pi pi-fw pi-power-off' } ]; } }
– Than add the below code in app.component.html file
<button #btn type="button" pButton icon="pi pi-bars" label="Show" (click)="menu.toggle($event)"></button> <p-tieredMenu #menu [model]="items" [popup]="true"></p-tieredMenu>
Output:~