Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we will see the Angular PrimeNG Menu SubMenus.
The Menu is used to make a component that contains some information & supports either static or dynamic positioning. The SubMenus supports 1 level of nesting via subitems of an item. This helps to create categories or headings in the menu.
Syntax:
- Create Items for submenus as follows:
items: MenuItem[]; ngOnInit() { this.items = [ { label: 'Algorithms', items: [{label: 'Sorting',}, {label: 'Searching',}, ], }, { label: 'Development', items: [{label: 'Android',}, {label: 'Web development',},], }, ]; }
- Use it as follows:
<p-menu [model]="items"></p-menu>
Creating Angular application & Module Installation:
Step 1: Create an Angular application using the following command.
ng new geeks_angular
Step 2: After creating your project folder i.e. geeks_angular, move to it using the following command.
cd geeks_angular
Step 3: Install PrimeNG and CDK in your given directory.
npm install primeng --save npm install primeicons --save
Project Structure: The project structure will look like the following:
Example 1: In the following example, we have a static submenu menu.
- app.component.html
< h1 style="color: green;
text-align:center;">
GeeksforGeeks
</ h1 >
< h3 >Angular PrimeNG Menu SubMenus</ h3 >
< p-menu [model]="items"></ p-menu >
|
- app.component.ts
import { Component, OnInit,
ViewChild,
ViewEncapsulation } from '@angular/core' ;
import { MenuItem } from 'primeng/api' ;
import { SlideMenu } from 'primeng/slidemenu' ;
@Component({ selector: 'app-root' ,
templateUrl: './app.component.html' ,
styleUrls: [ './app.component.css' ],
}) export class AppComponent { items: MenuItem[];
ngOnInit() {
this .items = [
{
label: 'Data Structures' ,
items: [
{
label: 'Linked List' ,
items: [
{
label: 'Singly Linked List' ,
},
{
label: 'Doubly Linked List' ,
},
],
},
{
label: 'Trie' ,
},
{
label: 'Array' ,
},
],
},
{
label: 'Algorithms' ,
items: [
{
label: 'Sorting' ,
},
{
label: 'Searching' ,
},
],
},
{
label: 'Development' ,
items: [
{
label: 'Android' ,
},
{
label: 'Web development' ,
},
],
},
];
}
} |
- app.module.ts
import { NgModule } from '@angular/core' ;
import { BrowserModule } from '@angular/platform-browser' ;
import { BrowserAnimationsModule } from '@angular/platform-browser/animations' ;
import { AppComponent } from './app.component' ;
import { ButtonModule } from 'primeng/button' ;
import { MessageService } from 'primeng/api' ;
import { MenuModule } from 'primeng/menu' ;
@NgModule({ imports: [BrowserModule,
BrowserAnimationsModule,
ButtonModule,
MenuModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [MessageService],
}) export class AppModule { } |
Output:
Example 2: In the following example, we have a popup submenu menu.
- app.component.html
< h1 style="color: green;
text-align:center;">
GeeksforGeeks
</ h1 >
< h3 >Angular PrimeNG Menu SubMenus</ h3 >
< p-menu #menu [popup]="true"
[model]="items">
</ p-menu >
< button type = "button" pButton
icon = "pi pi-list" label = "Show" (click)="menu.toggle($event)">
</ button >
|
- app.component.ts
import { Component, OnInit,
ViewChild,
ViewEncapsulation }
from '@angular/core' ;
import { MenuItem } from 'primeng/api' ;
import { SlideMenu } from 'primeng/slidemenu' ;
@Component({ selector: 'app-root' ,
templateUrl: './app.component.html' ,
styleUrls: [ './app.component.css' ],
}) export class AppComponent { items: MenuItem[];
ngOnInit() {
this .items = [
{
label: 'Data Structures' ,
items: [
{
label: 'Linked List' ,
items: [
{
label: 'Singly Linked List' ,
},
{
label: 'Doubly Linked List' ,
},
],
},
{
label: 'Trie' ,
},
{
label: 'Array' ,
},
],
},
{
label: 'Algorithms' ,
items: [
{
label: 'Sorting' ,
},
{
label: 'Searching' ,
},
],
},
{
label: 'Development' ,
items: [
{
label: 'Android' ,
},
{
label: 'Web development' ,
},
],
},
];
}
} |
- app.module.ts
import { NgModule } from '@angular/core' ;
import { BrowserModule } from '@angular/platform-browser' ;
import { BrowserAnimationsModule } from '@angular/platform-browser/animations' ;
import { AppComponent } from './app.component' ;
import { ButtonModule } from 'primeng/button' ;
import { MessageService } from 'primeng/api' ;
import { MenuModule } from 'primeng/menu' ;
@NgModule({ imports: [BrowserModule,
BrowserAnimationsModule,
ButtonModule,
MenuModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [MessageService],
}) export class AppModule { } |
Output:
Reference: https://primefaces.org/primeng/menu