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 Breadcrumb en Angular PrimeNG. También aprenderemos sobre las propiedades, los eventos y el estilo junto con sus sintaxis que se utilizarán en el código.
Componente de ruta de navegación: proporciona el enlace de navegación que se utiliza para vincular las páginas anteriores por las que navega el usuario y mostrarlo en la jerarquía.
Propiedades:
- modelo: Es una array de elementos de menú que se mostrarán. Es de tipo de datos de array, el valor predeterminado es nulo.
- inicio: Es la configuración del elemento de menú para el icono de inicio. Es de tipo MenuItem, el valor por defecto es nulo.
- estilo: Es el estilo en línea del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
- styleClass: Es la clase de estilo del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
Eventos :
- onItemClick: es una devolución de llamada que se activa cuando se selecciona un elemento.
Estilo:
- p-breadcrumb: Es el elemento contenedor.
- p-menuitem: Es el elemento menuitem.
- p-menuitem-text: Es la etiqueta de un menuitem.
- p-breadcrumb-chevron: Es el elemento chevron.
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 ilustra cómo usar el componente Breadcrumb.
app.component.html
<h2>GeeksforGeeks</h2> <h5>PrimeNG Breadcrumb Component</h5> <p-breadcrumb [model]="gfg"></p-breadcrumb>
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 { BreadcrumbModule } from "primeng/breadcrumb";
@NgModule({
imports: [BrowserModule,
BrowserAnimationsModule,
BreadcrumbModule],
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: "AngularJS" },
{ label: "ReactJS" },
{ label: "HTML" },
{ label: "JavaScript" },
{ label: "PrimeNG" },
];
}
}
Producción:
Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad de inicio en el componente de ruta de navegación y también crearemos la lista de elementos de los elementos usando una plantilla HTML.
app.component.html
<p-breadcrumb
[model]="[{label: 'A'},{label: 'B'},
{label: 'C'},{label: 'D'},{label: 'E'}]"
[home]="home">
</p-breadcrumb>
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 { BreadcrumbModule } from "primeng/breadcrumb";
@NgModule({
imports: [BrowserModule,
BrowserAnimationsModule,
BreadcrumbModule],
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.home = { icon: "pi pi-home" };
}
}
Producción:
Referencia: https://primefaces.org/primeng/showcase/#/breadcrumb