Angular PrimeNG TieredMenu Popup

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. In this article, we will see how to use the TieredMenu Popup in Angular PrimeNG.

TieredMenu Popup allows a user to make the menu in the form of popup tiers using a button toggle. The Menu can be popped up either by enabling the popup property or by invoking the toggle method that passes the event from the anchor element. The default value of Menu is inline.

Angular PrimeNG TieredMenu Popup properties:

• popup: This property defines if the menu would be displayed as a popup. It is of the boolean data type & the default value is false.
• model: This property is an array of menu items. It is of array data type & the default value is null.

Syntax:

<button #btn type="button" pButton 
    icon="..." label="..." 
    (click)="geeks.toggle($event)">
</button>

<p-tieredMenu #geeks [model]="gfg" 
    [popup]="true">
</p-tieredMenu>

Creating Angular Application and Installing the Module:

Step 1: Create an Angular application using the following command:

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: After complete installation, it will look like the following:

Project Structure

Example 1: Below is the code example that demonstrates the TieredMenu Popup using the Angular PrimeNG.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h5>
  Angular PrimeNG TieredMenu Popup
</h5>
<button #btn type="button"
        pButton label="Click Here"
        (click)="geeks.toggle($event)">
</button>
<p-tieredMenu #geeks [model]="gfg"
              [popup]="true">
</p-tieredMenu>

app.component.ts

import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  gfg: MenuItem[];

  ngOnInit() {
    this.gfg = [
      {
        label: "JavaScript",
        items: [
          {
            label: "JavaScript1",
            items: [
              {
                label: "JavaScript1.1",
              },
              {
                label: "JavaScript1.2",
              },
            ],
          },
          {
            label: "JavaScript2",
          },
          {
            label: "JavaScript3",
          },
        ],
      },
      {
        label: "HTML",
        items: [
          {
            label: "HTML 1",
          },
          {
            label: "HTML 2",
          },
        ],
      },
      {
        label: "Angular",

        items: [
          {
            label: "Angular 1",
          },
          {
            label: "Angular 2",
          },
        ],
      },
    ];
  }
}

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 { TieredMenuModule } from "primeng/tieredmenu";
import { ButtonModule } from "primeng/button";

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TieredMenuModule,
    ButtonModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Output:

Example 2: Below is another code that demonstrates the TieredMenu Popup in Angular PrimeNG by specifying some button classes with icons.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h5>
    Angular PrimeNG TieredMenu Popup
</h5>
<button #btn type="button"
        pButton label="GfG courses"
        (click)="geeks.toggle($event)"
        class="p-button-success"
        icon="pi pi-code">
</button>
<p-tieredMenu #geeks [model]="gfg"
              [popup]="true">
</p-tieredMenu>

app.component.ts

import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  gfg: MenuItem[];

  ngOnInit() {
    this.gfg = [
      {
        label: "Placement - Self Paced",
        items: [
          {
            label: "Batch1",
            items: [
              {
                label: "Batch1.1",
              },
              {
                label: "Batch1.2",
              },
            ],
          },
          {
            label: "Batch2",
          },
          {
            label: "Batch3",
          },
        ],
      },
      {
        label: "Gate Preparation",
        items: [
          {
            label: "Batch1",
          },
          {
            label: "Batch2",
          },
        ],
      },
      {
        label: "C++ STL",

        items: [
          {
            label: "Batch1",
          },
          {
            label: "Batch2",
          },
        ],
      },
    ];
  }
}

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 { TieredMenuModule } from "primeng/tieredmenu";
import { ButtonModule } from "primeng/button";

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TieredMenuModule,
    ButtonModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Output:

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