События меню Angular PrimeNG

Опубликовано: 22 Февраля, 2023

Angular PrimeNG — это библиотека с открытым исходным кодом, состоящая из собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и эта структура используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы увидим события меню Angular PrimeNG.

Компонент меню используется для навигации по веб-приложению и поддерживает как статическое, так и динамическое позиционирование. Два события компонента Menu с именем onShow и onHide описаны ниже.

События меню Angular PrimeNG:

onShow: это событие принимает обратный вызов для вызова при отображении меню наложения.
onHide: это событие принимает обратный вызов для вызова, когда меню наложения скрыто.

Синтаксис:

<p-menu
    (menu-event)="callback()"
    [model]="..."
    [popup]="true">
</p-menu>

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 3: Наконец, установите PrimeNG в указанный вами каталог.

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

Структура проекта: Структура проекта будет выглядеть следующим образом после выполнения вышеуказанных шагов:

Пример 1. Этот пример иллюстрирует использование события onShow для меню в режиме всплывающего окна и показывает всплывающее сообщение при срабатывании события.

приложение.component.html:

HTML

<h1 style="color:green">
    GeeksforGeeks
</h1>
<h3>
    Angular PrimeNG Menu Events
</h3>
  
<p-button 
    icon="pi pi-window-maximize" 
    label="Open Menu" 
    (click)="myMenu.toggle($event)">
</p-button>
  
<p-menu
    #myMenu
    [model]="navigation"
    [popup]="true"
    (onShow)="menuOnShow()">
</p-menu>
<p-toast></p-toast>

app.component.ts:

Javascript

import { Component } from "@angular/core";
import { MenuItem, MessageService } from "primeng/api"
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
    providers: [MessageService]
})
export class AppComponent {
    constructor(private msg: MessageService){}
    navigation: MenuItem[] = [];
    ngOnInit()
    {
        this.navigation = [
            {
                label: "Home",
                icon: "pi pi-home"
            },
            {
                label: "Blog",
                icon: "pi pi-book"
            },
            {
                label: "Tools",
                icon: "pi pi-cog"
            },
            {
                label: "Cart",
                icon: "pi pi-shopping-cart"
            },
            {
                label: "Search",
                icon: "pi pi-search"
            }
        ]
    }
  
    menuOnShow()
    {
        this.msg.add({
            severity: "success",
            summary: "Menu Shown",
            detail: "onShow Event Triggered"
        })
    }
}

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 { }

Выход:

Пример 2: В приведенном ниже примере мы будем использовать onHide событие всплывающего меню для отображения всплывающего сообщения, когда меню скрыто.

приложение.component.html:

HTML

<h1 style="color:green">
    GeeksforGeeks
</h1>
<h3>
    Angular PrimeNG Menu Events
</h3>
  
<h4>OnHide Event - PrimeNG Menu</h4>
<p-button 
    icon="pi pi-window-maximize" 
    label="Open Menu" 
    (click)="myMenu.toggle($event)">
</p-button>
  
<p-menu
    #myMenu
    (onHide)="menuOnHide()"
    [model]="navigation"
    [popup]="true">
</p-menu>
<p-toast></p-toast>

app.component.ts:

Javascript

import { Component } from "@angular/core";
import { MenuItem, MessageService } from "primeng/api"
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
    providers: [MessageService]
})
export class AppComponent {
    constructor(private msg: MessageService){}
    navigation: MenuItem[] = [];
    ngOnInit()
    {
        this.navigation = [
            {
                label: "Home",
                icon: "pi pi-home"
            },
            {
                label: "Blog",
                icon: "pi pi-book"
            },
            {
                label: "Tools",
                icon: "pi pi-cog"
            },
            {
                label: "Cart",
                icon: "pi pi-shopping-cart"
            },
            {
                label: "Search",
                icon: "pi pi-search"
            }
        ]
    }
  
    menuOnHide()
    {
        this.msg.add({
            severity: "error",
            summary: "Menu Hidden",
            detail: "onHide Event Fired"
        })
    }
}

app.module.ts:

Javascript

import { Component } from "@angular/core";
import { MenuItem, MessageService } from "primeng/api"
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
    providers: [MessageService]
})
export class AppComponent {
    constructor(private msg: MessageService) { }
    navigation: MenuItem[] = [];
    ngOnInit() {
        this.navigation = [
            {
                label: "Home",
                icon: "pi pi-home"
            },
            {
                label: "Blog",
                icon: "pi pi-book"
            },
            {
                label: "Tools",
                icon: "pi pi-cog"
            },
            {
                label: "Cart",
                icon: "pi pi-shopping-cart"
            },
            {
                label: "Search",
                icon: "pi pi-search"
            }
        ]
    }
  
    menuOnHide() {
        this.msg.add({
            severity: "error",
            summary: "Menu Hidden",
            detail: "onHide Event Fired"
        })
    }
}

Выход:

Ссылка: https://www.primefaces.org/primeng/menu

Technical Scripter Picked AngularJS

События меню Angular PrimeNG

HTML

Javascript

Javascript

HTML

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ