Descripción general de los componentes del chip Angular

    [The Angular Chip component](https://es.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/classes/igxchipcomponent.html) is a visual element that displays information in an oval container. The component has various properties - it can be templated, deleted, and selected. Multiple chips can be reordered and visually connected to each other, using the chip area as a container.

    Angular Chip Example

    Getting Started with Ignite UI for Angular Chip

    Para comenzar con el componente Ignite UI for Angular Chip, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

    ng add igniteui-angular

    Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importar IgxChipsModule en el archivo app.module.ts:

    // app.module.ts

import { IgxChipsModule } from 'igniteui-angular';
// import { IgxChipsModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxChipsModule],
    ...
})
export class AppModule {}

    Alternativamente, a partir de 16.0.0, puede importar IgxChipComponent como una dependencia independiente o usar el token IGX_CHIPS_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

    // home.component.ts

import { IGX_CHIPS_DIRECTIVES } from 'igniteui-angular';
import { NgFor } from '@angular/common';
// import { IGX_CHIPS_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-chip *ngFor="let chip of chipList" [id]="chip.id">
        {{chip.text}}
    </igx-chip>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_CHIPS_DIRECTIVES, NgFor]
})
export class HomeComponent {
    public chipList = [
        { text: 'Country', id: '1', icon: 'place' },
        { text: 'City', id: '2', icon: 'location_city' },
        { text: 'Address', id: '3', icon: 'home' },
        { text: 'Street', id: '4', icon: 'streetview' }
    ];
}

    Ahora que ha importado el módulo o las directivas Ignite UI for Angular Chips, puede comenzar a usar el componente igx-chip.

    Using the Angular Chip Component

    ​IgxChipComponent tiene una propiedad de entrada id para que las diferentes instancias de chip se puedan distinguir fácilmente. Si no se proporciona una id, se generará automáticamente.

    <igx-chip *ngFor="let chip of chipList" [id]="chip.id">
    {{chip.text}}
</igx-chip>

    Selección

    La selección se puede habilitar estableciendo la propiedad de entrada selectable en true. Al seleccionar un chip, se activa el evento selectedChanging. Proporciona el nuevo valor selected para que pueda obtener el nuevo estado y el evento original en originalEvent que desencadenó el cambio de selección. Si esto no se hace mediante la interacción del usuario, sino estableciendo la propiedad selected mediante programación, el argumento originalEvent tiene un valor null.

    <igx-chip *ngFor="let chip of chipList" [selectable]="true">
    <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
    {{chip.text}}
</igx-chip>

    Removing

    La eliminación se puede habilitar estableciendo la entrada removable en true. Cuando está habilitado, se muestra un botón de eliminación al final del chip. Al retirar un chip, se emite el evento remove.

    De forma predeterminada, el chip no se elimina automáticamente del árbol DOM al hacer clic en el icono de eliminación. La eliminación debe realizarse manualmente.

    <igx-chip *ngFor="let chip of chipList" [id]="chip.id" [removable]="true" (remove)="chipRemoved($event)">
    <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
    {{chip.text}}
</igx-chip>

    public chipRemoved(event: IBaseChipEventArgs) {
    this.chipList = this.chipList.filter((item) => {
        return item.id !== event.owner.id;
    });
    this.changeDetectionRef.detectChanges();
}

    Dragging

    El arrastre se puede habilitar configurando la entrada draggable en true. Cuando está habilitado, puede hacer clic y arrastrar el chip.

    <igx-chip *ngFor="let chip of chipList" [id]="chip.id" [draggable]="true">
    <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
    {chip.text}}
</igx-chip>
    Note

    Para reordenar los chips, necesita manejar el evento usando IgxChipsAreaComponent.

    Para crear la muestra de demostración, utilizaremos las funciones anteriores:

    <igx-chip
*ngFor="let chip of chipList"
[id]="chip.id"
[selectable]="true"
[removable]="true"
(remove)="chipRemoved($event)"
>
    <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
    {{chip.text}}
</igx-chip>

    Luego, necesitamos agregar chipList y la función que maneja el evento remove:

    import { IBaseChipEventArgs } from 'igniteui-angular';
// import { IBaseChipEventArgs } from '@infragistics/igniteui-angular'; for licensed package
...
public chipList = [
    {
        text: 'Country',
        id: '1',
        icon: 'place'
    },
    {
        text: 'City',
        id: '2',
        icon: 'location_city'
    },
    {
        text: 'Town',
        id: '3',
        icon: 'store'
    },
    {
        text: 'First Name',
        id: '4',
        icon: 'person_pin'
    }
];

private changeDetectionRef: any;

public chipRemoved(event: IBaseChipEventArgs) {
    this.chipList = this.chipList.filter((item) => {
        return item.id !== event.owner.id;
    });
    this.changeDetectionRef.detectChanges();
}

    Si todo ha ido bien deberías ver esto en tu navegador:

    Chip Templates

    Todos los elementos de IgxChipComponent son plantillas.

    Puede crear una plantilla para el prefix y el suffix del chip, utilizando las directivas IgxPrefix e IgxSuffix:

    <igx-chip>
    <igx-icon igxPrefix>insert_emoticon</igx-icon>
    <igx-icon igxSuffix style="transform: rotate(180deg)">insert_emoticon</igx-icon>
    <span>Why not both?</span>
</igx-chip>

    Puede personalizar el tamaño del chip utilizando la variable CSS [--ig-size]. De forma predeterminada, está configurado en var(--ig-size-large). También se puede configurar en var(--ig-size-medium) o var(--ig-size-small), mientras que todo dentro del chip conserva su posición relativa:

    <igx-chip>Hi! My name is Chip!</igx-chip>

<igx-chip style="--ig-size: var(--ig-size-medium)">
    I can be smaller!
</igx-chip>

<igx-chip style="--ig-size: var(--ig-size-small)">
    <igx-icon igxPrefix>child_care</igx-icon>
    Even tiny!
</igx-chip>

    Puede personalizar el select icon utilizando la entrada selectIcon. Acepta valores de tipo TemplateRef y anula el icono predeterminado manteniendo la misma funcionalidad.

    <igx-chip *ngFor="let chip of chipList" [selectable]="true" [selectIcon]="mySelectIcon">
    <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
    {{chip.text}}
</igx-chip>

<ng-template #mySelectIcon>
    <igx-icon>check_circle</igx-icon>
</ng-template>

    Puede personalizar el remove icon utilizando la entrada removeIcon. Toma un valor de tipo TemplateRef y lo representa en lugar del icono de eliminación predeterminado.

    <igx-chip *ngFor="let chip of chipList" [removable]="true" [removeIcon]="myRemoveIcon">
    <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
    {{chip.text}}
</igx-chip>

<ng-template #myRemoveIcon>
    <igx-icon>delete</igx-icon>
</ng-template>

    Chip Area

    El IgxChipsAreaComponent se utiliza cuando se manejan escenarios más complejos que requieren interacción entre chips (arrastrar, seleccionar, navegar, etc.).

    Reorder Chips

    El usuario final puede arrastrar el chip para cambiar su posición. El arrastre está deshabilitado de forma predeterminada, pero se puede habilitar usando la propiedad de entrada draggable. Debe manejar manualmente el reordenamiento de chips real. Aquí es donde el área del chip resulta útil, ya que proporciona el evento reorder que devuelve el nuevo orden cuando un chip se arrastra sobre otro chip.

    <igx-chips-area (reorder)="chipsOrderChanged($event)">
    <igx-chip *ngFor="let chip of chipList" [draggable]="'true'">
        <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
        {{chip.text}}
    </igx-chip>
</igx-chips-area>

    public chipsOrderChanged(event: IChipsAreaReorderEventArgs) {
    const newChipList = [];
    for (const chip of event.chipsArray) {
        const chipItem = this.chipList.filter((item) => {
            return item.id === chip.id;
        })[0];
        newChipList.push(chipItem);
    }
    this.chipList = newChipList;
}

    Keyboard Navigation

    El chip se puede enfocar usando la tecla Tab o haciendo clic en él. Cuando los chips están en un área de chips, se pueden reordenar mediante la navegación con el teclado:

    • Controles del teclado cuando el chip está enfocado:

      • IZQUIERDA: mueve el foco al chip de la izquierda.

      • DERECHA: mueve el foco al chip de la derecha.

      • ESPACIO: alterna la selección de chip si es seleccionable.

      • ELIMINAR: activa el evento remove del igxChip para que la eliminación del chip se pueda manejar manualmente.

      • MAYÚS + IZQUIERDA: activa el evento reorder para igxChipArea cuando el chip actualmente enfocado debe moverse hacia la izquierda.

      • MAYÚS + DERECHA: activa el evento reorder para igxChipArea cuando el chip actualmente enfocado debe moverse una posición hacia la derecha.

    • Controles del teclado cuando el botón Quitar está enfocado:

      • ESPACIO o ENTRAR Activa la salida remove para que la eliminación del chip se pueda manejar manualmente.

    Aquí hay un ejemplo del área del chip usando IgxAvatar como prefijo e íconos personalizados para todos los chips:

    <igx-chips-area (reorder)="chipsOrderChanged($event)">
    <igx-chip
    *ngFor="let chip of chipList"
    [id]="chip.id"
    [selectable]="true"
    [selectIcon]="mySelectIcon"
    [removable]="true"
    [removeIcon]="myRemoveIcon"
    (remove)="chipRemoved($event)"
    [draggable]="'true'">
        <igx-avatar
        class="chip-avatar-resized"
        igxPrefix
        [src]="chip.photo"
        shape="circle"
        ></igx-avatar>
        {{chip.name}}
    </igx-chip>
</igx-chips-area>

<ng-template #mySelectIcon>
    <igx-icon>check_circle</igx-icon>
</ng-template>

<ng-template #myRemoveIcon>
    <igx-icon>delete</igx-icon>
</ng-template>

    Cambie el tamaño del avatar para que se ajuste al chip:

    .chip-avatar-resized {
    width: 2em;
    height: 2em;
    min-width: 2em;
}

    Agregue chipList y las funciones que manejan los eventos:

    import { IBaseChipEventArgs, IChipsAreaReorderEventArgs } from 'igniteui-angular';
// import { IBaseChipEventArgs, IChipsAreaReorderEventArgs } from '@infragistics/igniteui-angular'; for licensed package

...
public chipList = [
    {
        id: '770-504-2217',
        name: 'Terrance Orta',
        photo: 'https://es.infragistics.com/angular-demos/assets/images/men/27.jpg'
    },
    {
        id: '423-676-2869',
        name: 'Richard Mahoney',
        photo: 'https://es.infragistics.com/angular-demos/assets/images/men/13.jpg'
    },
    {
        id: '859-496-2817',
        name: 'Donna Price',
        photo: 'https://es.infragistics.com/angular-demos/assets/images/women/50.jpg'
    }
];

private changeDetectionRef: any;

public chipRemoved(event: IBaseChipEventArgs) {
    this.chipList = this.chipList.filter((item) => {
        return item.id !== event.owner.id;
    });
    this.changeDetectionRef.detectChanges();
}

public chipsOrderChanged(event: IChipsAreaReorderEventArgs) {
    const newChipList = [];
    for (const chip of event.chipsArray) {
        const chipItem = this.chipList.filter((item) => {
            return item.id === chip.id;
        })[0];
        newChipList.push(chipItem);
    }
    this.chipList = newChipList;
}

    Si todo está configurado correctamente, deberías ver esto en tu navegador:

    Demo

    Estilismo

    Para comenzar a diseñar el chip, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el chip-theme y acepta algunos parámetros que dan estilo a los elementos del chip:

    $custom-theme: chip-theme(
    $background: #011627,
    $hover-background:  #011627dc,
    $focus-background: #0116276c,
    $selected-background: #ECAA53,
    $hover-selected-background: #ECAA53,
    $focus-selected-background: #ECAA53,
    $text-color: #FEFEFE,
    $remove-icon-color: #f14545,
    $remove-icon-color-focus: #da0000,
    $border-radius: 5px
);

    Including Themes

    El último paso es incluir el tema del componente en nuestra aplicación.

    Si $legacy-support está configurado en true, incluya el tema del componente así:

     @include chip($custom-theme);
    Note

    Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep

    :host {
     ::ng-deep {
        @include chip($custom-theme);
    }
}

    Si $legacy-support está configurado en false (predeterminado), incluya las variables CSS del componente así:

    @include css-vars($custom-theme);
    Note

    Si el componente utiliza una ViewEncapsulation Emulated, aún debe usar:host porque necesita un selector global para anular las variables.

    :host {
    @include css-vars($custom-theme);
}

    Demo

    Custom sizing

    Puede utilizar la variable, dirigiéndose directamente a la--size​ ​igx-chip variable :

    igx-chip {
  --size: 50px;
}

    O bien, puede utilizar la variable universal--igx-chip-size para dirigirse a todas las instancias:

    <div class="my-app">
  <igx-chip></igx-chip>
</div>

    .my-app {
  --igx-chip-size: 50px;
}

    También puede utilizar uno de los tamaños predefinidos, asignándolo a la--ig-size variable. Los valores disponibles para--ig-size son--ig-size-small,,--ig-size-medium y--ig-size-large:

    igx-chip {
    --ig-size: var(--ig-size-small);
}

    Obtén más información al respecto en el artículo Talla.

    Known Issues and Limitations

    • El uso del componente Chips Area en IE11 requiere la importación explícita de la matriz polyfill en polyfill.ts de la aplicación angular.

      import 'core-js/es7/array';

    API

    Theming Dependencies

    References

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.