Angular PrimeNG Menu SubMenus
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 Beginner_angular
Step 2: After creating your project folder i.e. Beginner_angular, move to it using the following command.
cd Beginner_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
HTML
< h1 style="color: green; text-align:center;"> w3wiki </ h1 > < h3 >Angular PrimeNG Menu SubMenus</ h3 > < p-menu [model]="items"></ p-menu > |
- app.component.ts
Javascript
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
Javascript
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
HTML
< h1 style="color: green; text-align:center;"> w3wiki </ 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
Javascript
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
Javascript
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