Componente Angular PrimeNG TabMenu

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 TabMenu en Angular PrimeNG.

Componente TabMenu: se utiliza para crear una barra de navegación que mostrará los elementos de navegación como un encabezado de navegación, es decir, es un menú en forma de pestañas.

Propiedades:

• modelo : Es una array de elementos de menú. Acepta la array como un tipo de datos de entrada y el valor predeterminado es nulo.
• activeItem : Define el elemento de menú activo predeterminado. Acepta el elemento del menú como un tipo de entrada y el valor predeterminado es nulo.
• style : Establece el estilo en línea del componente. Acepta la string como un tipo de datos de entrada y el valor predeterminado es nulo.
• styleClass: Es la clase de estilo del componente. Acepta la string como un tipo de datos de entrada y el valor predeterminado es nulo.

Estilo:

• p-tabmenu: Es un elemento contenedor.
• p-tabmenu-nav: Es un elemento de lista de encabezados.
• p-tabmenuitem: Es un elemento para los elementos del menú.
• p-menuitem-link: Es un enlace dentro de un elemento de menú.
• p-menuitem-text: Es una etiqueta de un elemento de menú.
• p-menuitem-icon: Es un icono de un elemento de menú.

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: después de la instalación completa, se verá así:

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente TabMenu.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG TabMenu Component</h5>
<p-tabMenu [model]="gfg"></p-tabMenu>

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'
      },
      {
        label: 'AngularJS'
      },
      {
        label: 'ReactJS'
      },
      {
        label: 'PrimeNG'
      }
    ];
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
import { TabMenuModule } from 'primeng/tabmenu';
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TabMenuModule,
    RouterModule.forRoot([{ path: '', 
                    component: AppComponent }])
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Producción:

Ejemplo 2: En este ejemplo, el primer elemento, es decir, HTML, en este caso, se preseleccionará al cargar la página por primera vez.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG TabMenu Component</h5>
<p-tabMenu [model]="gfg" [activeItem]="activeItem"></p-tabMenu>

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  gfg: MenuItem[];
  
  activeItem: MenuItem;
  
  ngOnInit() {
    this.gfg = [
      {
        label: 'HTML'
      },
      {
        label: 'AngularJS'
      },
      {
        label: 'ReactJS'
      },
      {
        label: 'PrimeNG'
      }
    ];
  
    this.activeItem = this.gfg[0];
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
  
import { AppComponent } from './app.component';
import { TabMenuModule } from 'primeng/tabmenu';
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TabMenuModule,
    RouterModule.forRoot([{ path: '', 
                  component: AppComponent }])
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Producción:

Referencia: https://primefaces.org/primeng/showcase/#/tabmenu