Методы меню Angular PrimeNG
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