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

• app.component.ts

• app.module.ts

Output:

 

Example 2: In the following example, we have a popup submenu menu.

• app.component.html

• app.component.ts

• app.module.ts

Output:

 

Reference: https://primefaces.org/primeng/menu