Visão geral do componente do chip Angular
The Angular Chip component
é um elemento visual que exibe informações em um contêiner oval. O componente tem várias propriedades - ele pode ser modelado, excluído e selecionado. Vários chips podem ser reordenados e visualmente conectados uns aos outros, usando a área do chip como um contêiner.
Angular Chip Example
Getting Started with Ignite UI for Angular Chip
Para começar a usar o componente Ignite UI for Angular Chip, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:
ng add igniteui-angular
Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.
O próximo passo é importar o IgxChipsModule no arquivo 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 {}
Como alternativa, a partir da 16.0.0
, você pode importar o IgxChipComponent
como uma dependência autônoma ou usar o token IGX_CHIPS_DIRECTIVES
para importar o componente e todos os seus componentes e diretivas de suporte.
// 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' },
];
}
Agora que você importou o módulo Ignite UI for Angular Chips ou as diretivas, você pode começar a usar o componente igx-chip
.
Using the Angular Chip Component
O IgxChipComponent
tem uma propriedade de entrada id
para que as diferentes instâncias de chip possam ser facilmente distinguidas. Se um id
não for fornecido, ele será gerado automaticamente.
<igx-chip *ngFor="let chip of chipList" [id]="chip.id">
{{chip.text}}
</igx-chip>
Escolha

A seleção pode ser habilitada definindo a propriedade selectable
input como true
. Ao selecionar um chip, o evento selectedChanging
é disparado. Ele fornece o novo valor selected
para que você possa obter o novo estado e o evento original em originalEvent
que acionou a alteração da seleção. Se isso não for feito por meio da interação do usuário, mas sim pela configuração da propriedade selected
programaticamente, o argumento originalEvent
terá um valor null
.
<igx-chip *ngFor="let chip of chipList" [selectable]="true">
<igx-icon igxPrefix>{{chip.icon}}</igx-icon>
{{chip.text}}
</igx-chip>
Removing

A remoção pode ser habilitada configurando a entrada removable
como true
. Quando habilitado, um botão remove é renderizado no final do chip. Ao remover um chip, o evento remove
é emitido.
Por padrão, o chip não é removido automaticamente da árvore DOM ao clicar no ícone remover. A remoção precisa ser feita 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
O arrasto pode ser habilitado configurando a entrada draggable
para true
. Quando habilitado, você pode clicar e arrastar o chip ao redor.
<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 os chips, você precisa manipular o evento usando o IgxChipsAreaComponent
.
Para criar o exemplo de demonstração, usaremos os recursos acima:
<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>
Então, precisamos adicionar o chipList
e a função que manipula o 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();
}
Se tudo correr bem, você deverá ver isto no seu navegador:
Chip Templates
Todos os elementos do IgxChipComponent
são modeláveis.
Você pode modelar o prefix
e o suffix
do chip usando as diretivas 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>
Você pode personalizar o tamanho do chip, usando a variável CSS [--ig-size
]. Por padrão, ele é definido como var(--ig-size-large)
. Ele também pode ser definido como var(--ig-size-medium)
ou var(--ig-size-small)
, enquanto tudo dentro do chip retém seu posicionamento relativo:

<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>
Você pode personalizar o select icon
usando a entrada selectIcon
. Ele aceita valores do tipo TemplateRef
e substitui o ícone padrão, mantendo a mesma funcionalidade.

<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>
Você pode personalizar o remove icon
, usando a entrada removeIcon
. Ele pega um valor do tipo TemplateRef
e o renderiza em vez do ícone de remoção padrão.

<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>
Demo
Para criar o exemplo de demonstração abaixo, usaremos os recursos acima:
<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>
Então, precisamos adicionar o chipList
e a função que manipula o 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();
}
Se tudo correr bem, você deverá ver isto no seu navegador:
Chip Area
O IgxChipsAreaComponent
é usado ao lidar com cenários mais complexos que exigem interação entre chips (arrastar, selecionar, navegar, etc.).
Reorder Chips

O chip pode ser arrastado pelo usuário final para alterar sua posição. O arrasto é desabilitado por padrão, mas pode ser habilitado usando a propriedade de entrada draggable
. Você precisa lidar com a reordenação real do chip manualmente. É aqui que a área do chip é útil, pois fornece o evento reorder
que retorna a nova ordem quando um chip é arrastado sobre outro 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
O chip pode ser focado usando a tecla Tab
ou clicando nele. Quando os chips estão em uma área de chip, eles podem ser reordenados usando a navegação do teclado:
Controles do teclado quando o chip está em foco:
ESQUERDA- Move o foco para o chip à esquerda.
DIREITA- Move o foco para o chip à direita.
ESPAÇO- Alterna a seleção de chip, se possível.
DELETE- Aciona o evento
remove
para oigxChip
para que a exclusão do chip possa ser feita manualmente.SHIFT + ESQUERDA- Aciona o evento
reorder
paraigxChipArea
quando o chip atualmente em foco deve mover a posição para a esquerda.SHIFT + DIREITA- Aciona o evento
reorder
paraigxChipArea
quando o chip atualmente em foco deve se mover uma posição para a direita.
Controles do teclado quando o botão Remover está em foco:
- ESPAÇO ou ENTER Dispara a saída
remove
para que a exclusão do chip possa ser feita manualmente.
- ESPAÇO ou ENTER Dispara a saída
Aqui está um exemplo da área de chips usando IgxAvatar como prefixo e ícones personalizados para todos os 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>
Redimensione o avatar para caber no chip:
.chip-avatar-resized {
width: 2em;
height: 2em;
min-width: 2em;
}
Adicione o chipList
e as funções que manipulam os 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://pt-br.infragistics.com/angular-demos/assets/images/men/27.jpg'
},
{
id: '423-676-2869',
name: 'Richard Mahoney',
photo: 'https://pt-br.infragistics.com/angular-demos/assets/images/men/13.jpg'
},
{
id: '859-496-2817',
name: 'Donna Price',
photo: 'https://pt-br.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;
}
Se tudo estiver configurado corretamente, você deverá ver isto no seu navegador:
Demo
Estilização
Para começar a estilizar o chip, precisamos importar o arquivo index
, onde todas as funções do tema e mixins de componentes estão localizados:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
Seguindo a abordagem mais simples, criamos um novo tema que estende o chip-theme
e aceita alguns parâmetros que estilizam os itens do 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,
);
O último passo é incluir o tema do componente em nosso aplicativo.
@include css-vars($custom-theme);
Demo
Custom sizing
Você pode usar a variável--size
, direcionando diretamente o igx-chip
:
igx-chip {
--size: 50px;
}
Ou você pode usar a variável universal--igx-chip-size
para atingir todas as instâncias:
<div class="my-app">
<igx-chip></igx-chip>
</div>
.my-app {
--igx-chip-size: 50px;
}
Você também pode usar um dos tamanhos predefinidos, atribuindo-o à variável--ig-size
. Os valores disponíveis para--ig-size
são--ig-size-small
,--ig-size-medium
e--ig-size-large
:
igx-chip {
--ig-size: var(--ig-size-small);
}
Saiba mais sobre isso no artigo Tamanho.