Componente de chips 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 Chips en Angular PrimeNG.

Componente de fichas: se utiliza para establecer múltiples valores para ingresar en un campo de entrada.

Propiedades:

• campo: Se utiliza para establecer el nombre de la propiedad para mostrar en un chip. Es de tipo de datos de string, el valor predeterminado es nulo.
• max: Se utiliza para establecer el número máximo de entradas permitidas. Es de tipo de datos numérico, el valor predeterminado es nulo.
• disabled: Se utiliza para deshabilitar la casilla de verificación. Es del tipo de dato booleano, el valor por defecto es false.
• estilo: Se utiliza para dar 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.
• marcador de posición: se utiliza para establecer el texto del marcador de posición para la entrada. Es de tipo de datos de string, el valor predeterminado es nulo.
• tabindex:  Se utiliza para establecer el índice del elemento en orden de tabulación. Es de tipo de datos numérico, el valor predeterminado es nulo.
• inputId:  es un identificador de ID del elemento de entrada subyacente. Es de tipo de datos de string, el valor predeterminado es nulo.
• ariaLabelledBy: Esta propiedad establece relaciones entre el componente y la(s) etiqueta(s) donde su valor debe ser uno o más ID de elementos. Es de tipo de datos de string, el valor predeterminado es nulo.
• allowDuplicate: se utiliza para establecer si se permiten valores duplicados o no. Es del tipo de dato booleano, el valor predeterminado es verdadero.
• inputStyle: se utiliza para establecer el estilo en línea del campo de entrada. Es de tipo de datos de string, el valor predeterminado es nulo.
• inputStyleClass: se utiliza para establecer la clase de estilo del campo de entrada. Es de tipo de datos de string, el valor predeterminado es nulo.
• addOnTab: se utiliza para establecer si se agrega un elemento al presionar la tecla de tabulación. Es del tipo de dato booleano, el valor por defecto es false.
• addOnBlur: se utiliza para establecer si se agrega un elemento cuando la entrada pierde el foco. Es del tipo de dato booleano, el valor por defecto es false.
• separador: se utiliza para configurar el carácter separador para agregar un elemento cuando se presiona además de la tecla Intro. Es de tipo de datos de string, el valor predeterminado es nulo.

Eventos:

• onAdd: es una devolución de llamada que se activa cuando se agrega un valor.
• onRemove: es una devolución de llamada que se activa cuando se elimina un valor.
• onChipClick: es una devolución de llamada que se activa cuando se hace clic en un chip.
• onFocus: es una devolución de llamada que se activa cuando se enfoca una entrada.
• onBlur: es una devolución de llamada que se activa cuando una entrada pierde el foco.

Estilo:

• p-chips: Es un elemento contenedor.
• p-chips-token: Es un contenedor de elementos de chip.
• p-chips-token-icon: Es un icono de un chip.
• p-chips-token-label: Es una etiqueta de un chip.
• p-chips-input-token: Es un contenedor de elementos de entrada.

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 Chips.

<div>
  <h2>GeeksforGeeks</h2>
  <h4>PrimeNG chips component</h4>
  <p-chips></p-chips>
</div>

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { ChipsModule } from "primeng/chips";
import { ButtonModule } from "primeng/button";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ChipsModule,
    ButtonModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Ejemplo 2: En este ejemplo, tenemos una plantilla para el componente Chips. 

<h5>PrimeNG Chips Component</h5>
<p-chips [(ngModel)]="geeks">
  <ng-template let-gfg pTemplate="gfg">
    {{gfg}}<i class="pi pi-user p-ml-2"></i>
  </ng-template>
</p-chips>

import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  geeks: string[];
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
  
import { AppComponent } from "./app.component";
import { ChipsModule } from "primeng/chips";
import { ButtonModule } from "primeng/button";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ChipsModule,
    ButtonModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

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