Наложение меню Angular PrimeNG

Опубликовано: 2 Января, 2023

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

Angular PrimeNG Menu Overlay может отображать меню как всплывающее окно. По умолчанию меню является встроенным, но режим всплывающего окна можно использовать, включив свойство всплывающего окна и вызвав функцию переключения с событием, переданным из элемента привязки.

Синтаксис:

<p-menu #menu [popup]="true" 
              [model]="items">
</p-menu>

<button type="button" pButton 
        icon="..." 
        label="..." 
        (click)="menu.toggle($event)">
</button>

Свойства наложения меню Angular PrimeNG:

[всплывающее окно]: решает, должно ли меню отображаться как всплывающее окно или нет. Его значение по умолчанию равно false.
[модель]: это массив пунктов меню.

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

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

ng new appname

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

cd appname

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

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

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

Запустите приведенную ниже команду, чтобы увидеть вывод:

ng serve --open

Пример 1. Ниже приведен пример, иллюстрирующий использование наложения меню Angular PrimeNG.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG Menu Overlay</h5>
<p-menu #menu [popup]="true" 
              [model]="items">
</p-menu>
<button type="button"
        pButton label="GfG Courses" 
        (click)="menu.toggle($event)"> 
</button>

app.component.ts

import { Component } from "@angular/core";
import { MenuItem, MessageService, PrimeNGConfig } from "primeng/api";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  providers: [MessageService],
})
export class AppComponent {
  items: MenuItem[];
  
  constructor(
    private messageService: MessageService,
    private primengConfig: PrimeNGConfig
  ) {}
  
  ngOnInit() {
    this.primengConfig.ripple = true;
  
    this.items = [
      {
        label: "GeeksforGeeks Courses",
        items: [
          {
            label: "Data Structure - Self Paced",
            icon: "pi pi-code",
          },
          {
            label: "Complete Interview Preparation",
            icon: "pi pi-globe",
          },
        ],
      },
    ];
  }
}

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { MenuModule } from "primeng/menu";
import { ButtonModule } from "primeng/button";
  
@NgModule({
  imports: [
    BrowserModule, 
      BrowserAnimationsModule, 
      MenuModule, 
      ButtonModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Выход:

Пример 2. Ниже приведен еще один пример, иллюстрирующий наложение меню Angular PrimeNG с использованием классов кнопок и значков.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG Menu Overlay</h5>
<p-menu #menu [popup]="true" 
              [model]="items"> 
</p-menu>
<button type="button" 
        pButton icon="pi pi-tags" 
        label="GfG Tutorials" 
        (click)="menu.toggle($event)" 
        class="p-button-outlined p-button-danger">
</button>

app.component.ts

import { Component } from "@angular/core";
import { MenuItem, MessageService, PrimeNGConfig } from "primeng/api";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  providers: [MessageService],
})
export class AppComponent {
  items: MenuItem[];
  
  constructor(
    private messageService: MessageService,
    private primengConfig: PrimeNGConfig
  ) {}
  
  ngOnInit() {
    this.primengConfig.ripple = true;
  
    this.items = [
      {
        label: "GeeksforGeeks Tutorials",
        items: [
          {
            label: "Algorithms",
            icon: "pi pi-code",
          },
          {
            label: "Gate Tutorials",
            icon: "pi pi-book",
          },
          {
            label: "Database Tutorials",
            icon: "pi pi-database",
          },
        ],
      },
    ];
  }
}

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { MenuModule } from "primeng/menu";
import { ButtonModule } from "primeng/button";
  
@NgModule({
  imports: [
    BrowserModule, 
      BrowserAnimationsModule, 
      MenuModule, 
      ButtonModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Выход:

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

Picked AngularJS

Наложение меню Angular PrimeNG

app.component.html

app.component.ts

app.module.ts

app.component.html

app.component.ts

app.module.ts

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