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:
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" > w3wiki </ 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" > w3wiki </ 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: