Angular PrimeNG Menu Properties

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 see Angular PrimeNG Menu Properties.

The Menu component is used to navigate the web application and supports static and dynamic positioning. The properties of the Menu component provided by PrimeNG are listed below.

Angular PrimeNG Menu Properties:

• model: It is an array of MenuItems to show. It is of array type and the default value is null.
• popup: If this property is set to true the Menu will be shown as a popup. The default value is false.
• style: It is the inline style of the component.
• styleClass: It is the style class of the component.
• appendTo: It is the target element to which the overlay will be attached. It accepts “body” or a local ng-template variable as its value.
• baseZIndex: It defines the base zIndex to be used in the layering of the component. The default value is 0.
• autoZIndex: If this property is set to true, the layering of the component will be managed automatically by the library. The default value is true.
• showTransitionOptions: It defines the transition options for the show animation of the popup menu. It accepts a string value and the default value is “.12s cubic-bezier(0, 0, 0.2, 1)”.
• hideTransitionOptions: It defines the transition options for the hide animation of the popup menu. It accepts a string value and the default value is “.1s linear”.

Syntax:

<p-menu
    [model]="..."
    ...
    showTransitionOptions="..."
    hideTransitionOptions="..."
    [popup]="...">
</p-menu>

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 used the modal, popup, and style properties of the Menu to give it a red border with a 10px border-radius.

app.component.html:

HTML

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

<h4>Simple Menu</h4>
<p-menu
    [model]="nav">
</p-menu>

<h4>Popup Menu</h4>
<p-button
    icon="pi pi-window-maximize"
    label="Open Menu"
    (click)="myMenu.toggle($event)">
</p-button>

<p-menu
    #myMenu
    [model]="nav"
    [style]="{
        'border': '2px solid red',
        'border-radius': '10px',
        'margin-top': '30px'
    }"
    [popup]="true">
</p-menu>

app.component.ts:

Javascript

import { isNgContainer } from '@angular/compiler';
import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api'
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    nav: MenuItem[] = [];
    ngOnInit()
    {
        this.nav = [
            {
                label: "Home",
                icon: "pi pi-home"
            },
            {
                label: "About Us",
                icon: "pi pi-info"
            },
            {
                label: "Contact",
                icon: "pi pi-phone"
            }
        ]
    }
}

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

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

Output:

Example 2: In this example, we used the showTransitionOptions and hideTransitionOptions properties of the popup menu to change its show and hide transition speed.

app.component.html:

HTML

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

<h4>showTransitionOptions="2s linear"</h4>
<h4>hideTransitionOptions="1s"</h4>

<p-button
    icon="pi pi-window-maximize"
    label="Open Menu"
    (click)="myMenu.toggle($event)">
</p-button>

<p-menu
    #myMenu
    [model]="nav"
    showTransitionOptions="2s linear"
    hideTransitionOptions="1s"
    [popup]="true">
</p-menu>

app.component.ts:

Javascript

import { isNgContainer } from '@angular/compiler';
import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api'
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    nav: MenuItem[] = [];
    ngOnInit()
    {
        this.nav = [
            {
                label: "Home",
                icon: "pi pi-home"
            },
            {
                label: "About Us",
                icon: "pi pi-info"
            },
            {
                label: "Contact",
                icon: "pi pi-phone"
            }
        ]
    }
}

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

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

Output:

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