Chip

igxChip is a compact visual component that displays information in an obround. Chip can be templated, deleted, and selected. Multiple chips can be reordered and visually connected to each other. Chips reside in a container called chips area which is responsible for managing the interactions between the chips.

Demo


Initializing Chips

The IgxChipComponent is the main class for a chip elemenent and the IgxChipsAreaComponent is the main class for a chip area. The chip area is used when handling more complex scenarios that require interaction between chips (dragging, selection, navigation etc.). The IgxChipComponent has an id input so that the different chips can be easily distinguished. If id is not provided it will be automatically generated.

Example of using igxChip with igxChipArea:

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

Chip states:

Default Hover Focus

Features

Selection

Default Selection

Selection can be enabled by setting an input called selectable. The selecting is done either by clicking on the chip itself or by using the Tab key to focus the chip and then pressing the Space key. If a chip is already selected it can be deselected by pressing the Space key again while the chip is focused or by clicking on it.

An event onSelection is fired when the selection state of the igxChip changes. It provides the new selected value so you can get the new state and the original event in originalEvent that triggered this selection change. If this is not done through user interaction but instead is done by setting the selected property programmatically the originalEvent argument has value null.

Also by default an icon is shown indicating that the chip is being selected. It is fully customizable and can be done through the selectIcon input. It accepts values of type TemplateRef and overrides the default icon while retaining the same functionality.

Example of customizing the select icon:

Custom Selection

<igx-chips-area #chipsArea>
    <igx-chip *ngFor="let chip of chipList" [selectable]="'true'" [selectIcon]="mySelectIcon">
        <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
        <span>{{chip.text}}</span>
    </igx-chip>
</igx-chips-area>
<ng-template #mySelectIcon>
    <igx-icon fontSet="fa-solid" name="fa-check-circle"></igx-icon>
</ng-template>

Removing

Removing

Removing can be enabled by setting the removable input to true. When enabled a remove button is rendered at the end of the chip. When the end-users performs any interaction like clicking on the remove button or pressing the Delete key while the chip is focused the onRemove event is emitted.

By default the chip does not remove itself from the template when the user wants to delete a chip. This needs to be handled manually using the onRemove event.

If you need to customize the remove icon you can use the removeIcon input. It takes a value of type TemplateRef and renders it instead of the default remove icon. This means that you can customize the remove button in any way while all the handling of it is still handled by the chip itself.

Remove icons

Example of handling chip removing and custom remove icon:

<igx-chips-area #chipsArea>
    <igx-chip *ngFor="let chip of chipList" [id]="chip.id" [removable]="true" [removeIcon]="myRemoveIcon" (onRemove)="chipRemoved($event)">
        <igx-icon igxPrefix>{{chip.icon}}</igx-icon>
        <span>{{chip.text}}</span>
    </igx-chip>
</igx-chips-area>
<ng-template #myRemoveIcon>
    <igx-icon fontSet="fa-solid" name="fa-trash-alt"></igx-icon>
</ng-template>
public chipRemoved(event: IBaseChipEventArgs) {
    this.chipList = this.chipList.filter((item) => {
        return item.id !== event.owner.id;
    });
    this.changeDetectionRef.detectChanges();
}

Moving/Dragging

Dragging

The chip can be dragged by the end-user in order to change it's position. The moving/dragging is disabled by default, but can be enabled with an option called draggable. You need to handle the actual moving of the chip in the template manually. This is where the chip area comes in handy since it provides onReorder event that returns the new order if a chip is dragged over another chip to take its place.

<igx-chips-area (onReorder)="chipsOrderChanged($event)">
    <igx-chip *ngFor="let chip of chipList" [draggable]="'true'">
        <igx-icon igxPrefix>{{chipElem.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;
}

Chip Templates

The IgxChipComponent's main structure consists of select icon, prefix, chip content, suffix and remove button. All of those elements are templatable.

The content of the chip is taken by the content defined inside the chip template except elements that define the prefix and suffix of the chip. You can define any type of content you need.

The prefix and suffix are also elements inside the actual chip area where they can be templated by your preference. The way they can be specified is by respectively using the IgxPrefix and IxgSuffix directives:

Prefix and Suffix

Example of using an icon for both prefix and suffix and a text for content:

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

Chip rendering can be customized so its dimensions can be different using the displayDensity input. By default it is set to comfortable. It can also be set to cosy or compact while everything inside the chip retains its relative positioning:

Density

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

<igx-chip displayDensity="cosy">
    I can be smaller!
</igx-chip>

<igx-chip displayDensity="compact">
    <igx-icon igxPrefix>child_care</igx-icon>
    Even tiny!
</igx-chip>

A few examples of how the chip can be even further customized:

Advanced customizing

Keyboard Navigation

The chip can be focused using the Tab key or by clicking on it. When in chip area chips can be reordered using keyboard navigation:

  • Keyboard controls when the chip is focused:

    • LEFT - Moves the focus to the chip on the left.

      Left

    • RIGHT - Moves the focus to the chip on the right.

      Right

    • SPACE - Toggles chip selection if it is selectable.

      Space

    • DELETE - Triggers the onRemove event for the igxChip so the chip deletion can be handled manually.
    • SHIFT + LEFT - Triggers onReorder event for the igxChipArea when the currently focused chip should move position to the left.
    • SHIFT + RIGHT - Triggers onReorder event for the igxChipArea when the currently focused chip should move one position to the right.
  • Keyboard controls when the remove button is focused:

    • SPACE or ENTER Fires the onRemove output so the chip deletion can be handled manually.

API

References

Our community is active and always welcoming to new ideas.

View page on GitHub