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 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

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

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;">
           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

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