Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente Menú en Angular PrimeNG. También aprenderemos sobre las propiedades, eventos, métodos y estilo junto con sus sintaxis que se usarán en el código.
Componente de menú: se utiliza para crear un componente que contiene información y admite posicionamiento estático o dinámico.
Propiedades:
- modelo: es una array de elementos de menú. Acepta el tipo de datos de array como entrada y el valor predeterminado es nulo.
- popup: Se utiliza para definir si el menú se mostrará como una ventana emergente. Es de tipo de datos booleano y el valor predeterminado es falso.
- estilo: Se utiliza para establecer el estilo en línea del componente. Es de tipo de datos de string y el valor predeterminado es nulo.
- styleClass: Se utiliza para establecer la clase de estilo del componente. Es de tipo de datos de string y el valor predeterminado es nulo.
- appendTo: es el elemento de destino para adjuntar la superposición. Acepta cualquier tipo de datos y el valor predeterminado es nulo.
- baseZIndex: se usa para establecer el valor base de zIndex para usar en capas. Es de tipo de datos numéricos y el valor predeterminado es 0.
- autoZIndex: Se utiliza para especificar si se gestionan automáticamente las capas. Es de tipo de datos booleano y el valor predeterminado es verdadero.
- showTransitionOptions: Se utiliza para mostrar las opciones de transición de la animación del espectáculo. Es del tipo de datos de string y el valor predeterminado es .12s cubic-bezier (0, 0, 0.2, 1).
- hideTransitionOptions: Se utiliza para ocultar las opciones de transición de la animación oculta. Es del tipo de datos de string y el valor predeterminado es .1s lineal.
Eventos:
- onShow: es una devolución de llamada que se activa cuando se muestra el menú superpuesto.
- onHide: es una devolución de llamada que se activa cuando el menú superpuesto está oculto.
Métodos:
- alternar: se utiliza para alternar la visibilidad del menú emergente.
- show: Se utiliza para mostrar el menú emergente.
- ocultar: Se utiliza para ocultar el menú emergente.
Estilo:
- p-menu: es un elemento contenedor.
- p-menu-list: es un elemento de lista.
- p-menuitem: es un elemento menuitem.
- p-menuitem-text: es una etiqueta de un menuitem.
- p-menuitem-icon: es un icono de un menuitem.
Creación de aplicaciones angulares e instalación de módulos:
- Paso 1: Cree una aplicación Angular usando el siguiente comando.
ng new appname
- Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.
cd appname
- Paso 3: Instale PrimeNG en su directorio dado.
npm install primeng --save npm install primeicons --save
Estructura del proyecto: se verá así:
Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente Menú.
app.component.html
<h2>GeeksforGeeks</h2> <h5>PrimeNG Menu Component</h5> <p-menu [model]="gfg"></p-menu>
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 {}
app.component.ts
import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
gfg: MenuItem[];
ngOnInit() {
this.gfg = [
{
label: 'HTML',
items: [
{
label: 'HTML 1'
},
{
label: 'HTML 2'
}
]
},
{
label: 'Angular',
items: [
{
label: 'Angular 1'
},
{
label: 'Angular 2'
}
]
}
];
}
}
Producción:
Ejemplo 2: En este ejemplo, estamos haciendo una lista de menú usando un botón.
app.component.html
<h2>GeeksforGeeks</h2> <h5>PrimeNG Menu Component</h5> <button type="button" pButton pRipple label="Click Here" (click)="menu.toggle($event)"></button> <p-menu #menu [popup]="true" [model]="gfg"></p-menu>
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';
import { RippleModule } from 'primeng/ripple';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
MenuModule,
RippleModule,
ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
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: 'HTML',
items: [
{
label: 'HTML 1'
},
{
label: 'HTML 2'
}
]
},
{
label: 'Angular',
items: [
{
label: 'Angular 1'
},
{
label: 'Angular 2'
}
]
}
];
}
}
Producción:
Referencia: https://primefaces.org/primeng/showcase/#/menu