Базовое меню Angular PrimeNG

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

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

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

Синтаксис:

<p-menu 
    [model]="...">
</p-menu>

Основные свойства меню Angular PrimeNG:

[модель]: это массив пунктов меню. Он принимает тип данных массива в качестве входных данных, а значение по умолчанию равно null.

Создание приложения 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 Basic</h5>
<p-menu [model]="gfg"> </p-menu>

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 {
  gfg: MenuItem[];
  
  constructor(
    private messageService: MessageService,
    private primengConfig: PrimeNGConfig
  ) {}
  
  ngOnInit() {
    this.primengConfig.ripple = true;
  
    this.gfg = [
      {
        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 Basic</h5>
<p-menu [model]="gfg"> </p-menu>

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 {
  gfg: MenuItem[];
  
  constructor(
    private messageService: MessageService,
    private primengConfig: PrimeNGConfig
  ) {}
  
  ngOnInit() {
    this.primengConfig.ripple = true;
  
    this.gfg = [
      {
        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

Базовое меню Angular PrimeNG

app.component.html

app.component.ts

app.module.ts

app.component.html

app.component.ts

app.module.ts

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