Angular PrimeNG菜单叠加

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来制作响应式网站非常方便。这篇文章将向我们展示如何在Angular PrimeNG中使用菜单叠加。

Angular PrimeNG菜单叠加可以将菜单显示为弹出式。默认情况下，菜单是内嵌式的，但是弹出式模式可以通过启用弹出式属性和调用toggle函数与锚点元素传递的事件来使用。

语法:

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

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

Angular PrimeNG菜单叠加属性：

[popup]。它决定菜单是否应该以弹出方式显示。它的默认值是false。
[model]。它是一个菜单项的数组。

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步在你给定的目录中安装PrimeNG。

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

项目结构：完成安装后，它将看起来像如下。

Angular PrimeNG菜单叠加

运行下面的命令可以看到输出。

ng serve --open

例子1：下面的例子说明了Angular PrimeNG菜单叠加的使用。

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

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",
          },
        ],
      },
    ];
  }
}

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

输出:

Angular PrimeNG菜单叠加

例子2：下面是另一个例子，说明了Angular PrimeNG菜单叠加使用按钮类和图标。

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

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",
          },
        ],
      },
    ];
  }
}

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

输出:

Angular PrimeNG菜单叠加