Angular PrimeNG Menu Methods

Angular PrimeNG is an open-source library that consists 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 discuss Angular PrimeNG Menu Methods.

The Menu component is used for navigating around the web application and supports both static and dynamic positioning. There are three methods for the menu component which are described below.

Angular PrimeNG Menu Methods:

• toggle: This method is used to toggle the visibility of the menu that is in popup mode.
• show: This method is used to show the menu that is in popup mode.
• hide: This method is used to hide the menu that is in popup mode.

Syntax:

// File: app.component.html
<p-menu
    #myMenu
    [model]="..."
    [popup]="true">
</p-menu>

// File: app.component.ts
export class AppComponent {
    @ViewChild('myMenu') menu!:  Menu;
    ...
    this.menu.show();
    this.menu.hide();
    this.menu.toggle();
}

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: Finally, Install PrimeNG in your given directory.

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

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

Example 1: In this example, we are using the show and hide method of the Menu to change its visibility programmatically.

app.component.html

HTML

<h1 style="color:green">
    GeeksforGeeks
</h1>
<h3>
    Angular PrimeNG Menu Methods
</h3>

<h5>Menu show() and hide() Methods</h5>

<p-button
    class="mr-3"
    icon="pi pi-align-right"
    label="Show Menu and Hide It After 3 Seconds"
    (click)="showAndHideMenu($event)">
</p-button>

<p-menu
    #myMenu
    [model]="navigation"
    [popup]="true">
</p-menu>

app.component.ts

Javascript

import { Component, ViewChild } from '@angular/core';
import { MenuItem } from 'primeng/api'
import { Menu } from 'primeng/menu';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent {
    @ViewChild('myMenu') menu!:  Menu;
    navigation: MenuItem[] = [];
    ngOnInit()
    {
        this.navigation = [
            {
                label: "Home",
                icon: "pi pi-home"
            },
            {
                label: "About",
                icon: "pi pi-exclamation-circle"
            },
            {
                label: "Gallery",
                icon: "pi pi-images"
            },
            {
                label: "Account",
                icon: "pi pi-user"
            },
            {
                label: "Others",
                icon: "pi pi-plus-circle"
            }
        ]
    }

    showAndHideMenu($ev: Event)
    {
        this.menu.show($ev);
        setTimeout(() => {
            this.menu.hide();
        }, 3000);
    }
}

app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ToastModule } from "primeng/toast";
import { ButtonModule } from "primeng/button";
import { MenuModule } from "primeng/menu";

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

Output:

Example 2: In this example, we used the toggle method of the Menu to toggle its visibility. On the click of the visibility, the toggle method of the Menu fires, and after 2 seconds it fires again.

app.component.html

HTML

<h1 style="color:green">
    GeeksforGeeks
</h1>
<h3>
    Angular PrimeNG Menu Methods
</h3>

<h5>Menu toggle() Method</h5>

<p-button
    label="Toggle Menu"
    icon="pi pi-align-right"
    (click)="toggleMenu($event)">
</p-button>

<p-menu
    #myMenu
    [model]="navigation"
    [popup]="true">
</p-menu>

app.component.ts

Javascript

import { Component, ViewChild } from '@angular/core';
import { MenuItem } from 'primeng/api'
import { Menu } from 'primeng/menu';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})

export class AppComponent {
    @ViewChild('myMenu') menu!:  Menu;
    navigation: MenuItem[] = [];
    ngOnInit()
    {
        this.navigation = [
            {
                label: "Home",
                icon: "pi pi-home"
            },
            {
                label: "About",
                icon: "pi pi-exclamation-circle"
            },
            {
                label: "Gallery",
                icon: "pi pi-images"
            },
            {
                label: "Account",
                icon: "pi pi-user"
            },
            {
                label: "Others",
                icon: "pi pi-plus-circle"
            }
        ]
    }

    toggleMenu($ev: Event)
    {
        this.menu.toggle($ev);
        setTimeout(() => {
            this.menu.toggle($ev);
        }, 2000);
    }
}

app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ToastModule } from "primeng/toast";
import { ButtonModule } from "primeng/button";
import { MenuModule } from "primeng/menu";

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

Output:

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