Componente de chip PrimeNG angular

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

Componente chip: Se utiliza para representar iconos, etiquetas e imágenes.

Propiedades:

• etiqueta : Se utiliza para definir el texto a mostrar. Es de tipo de datos de string, el valor predeterminado es nulo.
• icon : Se utiliza para definir el icono a mostrar. Es de tipo de datos de string, el valor predeterminado es nulo.
• image : Se utiliza para definir la imagen a mostrar. Es de tipo de datos de string, el valor predeterminado es nulo.
• extraíble : se utiliza para definir si mostrar un icono de eliminación. Es de tipo de dato booleano, el valor por defecto es false.
• style : se utiliza para establecer el estilo en línea del componente. Es de tipo de datos de objeto, el valor predeterminado es nulo.
• styleClass : Se utiliza para definir la clase de estilo del componente. Es de tipo de datos de string, el valor predeterminado es nulo.
• removeIcon : Es el icono del elemento remove. Es de tipo de datos de string, el valor predeterminado es pi pi-times-circle.

Estilo:

• p-chip: Es el elemento de estilo del contenedor.
• p-chip-image: Es el elemento contenedor en modo imagen.
• p-chip-text: Le da estilo al texto del chip.
• pi-chip-remove-icon: Da estilo al icono de eliminación.

Eventos:

• onRemove: es una función de devolución de llamada que se invoca cuando se quita un chip.

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: Tendrá el siguiente aspecto:

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

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Chip Component</h5>
<div class="p-d-flex p-ai-center">
  <p-chip label="A" styleClass="p-mr-1"></p-chip>
  <p-chip label="B" styleClass="p-mr-1"></p-chip>
  <p-chip label="C" styleClass="p-mr-1"></p-chip>
  <p-chip label="D" styleClass="p-mr-1"></p-chip>
  <p-chip label="E" styleClass="p-mr-1"></p-chip>
  <p-chip label="F"></p-chip>
</div>

import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ChipModule } from "primeng/chip";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            ChipModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo usar las propiedades extraíbles y de icono en el componente Chip.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Chip Component</h5>
<div class="p-d-flex p-ai-center">
    
  <p-chip
    label="A"
    removable="true"
    styleClass="p-mr-1"
    icon="pi pi-angle-double-left">
  </p-chip>
    
  <p-chip
    label="B"
    icon="pi pi-angle-left  "
    removable="true"
    styleClass="p-mr-1">
  </p-chip>
    
  <p-chip
    label="C"
    icon="pi pi-bars"
    removable="true"
    styleClass="p-mr-1">
  </p-chip>
    
  <p-chip
    label="D"
    icon="pi pi-angle-right"
    removable="true"
    styleClass="p-mr-1">
  </p-chip>
    
  <p-chip
    label="E"
    icon="pi pi-angle-double-right"
    removable="true"
    styleClass="p-mr-1">
  </p-chip>
</div>

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ChipModule } from "primeng/chip";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            ChipModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

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