Методы меню Angular PrimeNG

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

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

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

Методы меню Angular PrimeNG:

toggle: этот метод используется для переключения видимости меню, которое находится в режиме всплывающего окна.
show: этот метод используется для отображения меню в режиме всплывающего окна.
hide : этот метод используется для скрытия меню, которое находится в режиме всплывающего окна.

Синтаксис:

// 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();
}

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

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

ng new appname

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

cd appname

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

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

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

Пример 1. В этом примере мы используем метод отображения и скрытия меню, чтобы программно изменить его видимость.

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

Выход:

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

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

Выход:

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

Technical Scripter Picked AngularJS

Методы меню Angular PrimeNG

HTML

Javascript

Javascript

HTML

Javascript

Javascript

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