Components / Buttons / ChipList

Getting Started with Kendo UI for Angular ChipList

The ChipList allows you to maintain a set of selected chips.

The following example demonstrates how to change dynamically the chips in a ChipList.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        Order meal:
        <kendo-buttongroup class="meals" [selection]="'single'">
            <button kendoButton *ngFor="let meal of meals" [toggleable]="true" [selected]="meal.selected" (click)="selectedMeal(meal)">
                <div class="meal-icon">{{ meal.icon }}</div>
                {{ meal.name }}
            </button>
        </kendo-buttongroup>
        <div class="separator">
            <kendo-chip-list [selection]="'multiple'">
                <div>Add more:</div>
                <kendo-chip *ngFor="let addition of additions" [label]="addition.label"> </kendo-chip>
            </kendo-chip-list>
        </div>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [
        `
            .separator {
                margin-top: 12px;
            }
            .meal-icon {
                margin-right: 5px;
            }
            .meals {
                margin-left: 5px;
            }
        `
    ]
})
export class AppComponent {
    public meals: Array<{ name: string; icon: string; selected?: boolean }> = [
        { name: 'Pizza', icon: '🍕', selected: true },
        { name: 'Sushi', icon: '🍣' },
        { name: 'Burger', icon: '🍔' }
    ];
    public additions: Array<{ label: string }> = [{ label: 'Ketchup' }, { label: 'Mustard' }, { label: 'Мayonnaise' }];

    public selectedMeal(meal: { name: string; icon: string }): void {
        switch (meal.name) {
            case 'Pizza':
                this.additions = [{ label: 'Ketchup' }, { label: 'Mustard' }, { label: 'Мayonnaise' }];
                break;
            case 'Sushi':
                this.additions = [{ label: 'Wasabi' }, { label: 'Ginger' }, { label: 'Soy sauce' }];
                break;
            case 'Burger':
                this.additions = [{ label: 'Onions' }, { label: 'Avocado' }, { label: 'Eggs' }];
                break;
        }
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ButtonsModule } from '@progress/kendo-angular-buttons';

import { AppComponent } from './app.component';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule]
})
export class AppModule {}

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

The following example demonstrates basic ChipList events.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <kendo-chip-list
            [selection]="'multiple'"
            (selectedChange)="selectedChange($event)"
            (remove)="onRemove($event)"
        >
            <kendo-chip
                *ngFor="let chip of chips"
                [label]="chip.label"
                [icon]="chip.icon"
                [removable]="chip.removable"
            >
            </kendo-chip>
        </kendo-chip-list>

        <event-log title="Event log" [events]="events"></event-log>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        .example-config {
            margin-top: 20px;
        }
    `]
})
export class AppComponent {
    public events: string[] = [];

    public chips = [
        {
            label: 'Apple',
            icon: 'marker-pin-target',
            removable: true
        },
        {
            label: 'Strawberry',
            icon: 'marker-pin-target',
            removable: true
        },
        {
            label: 'Banana',
            icon: 'marker-pin-target',
            removable: true
        },
        {
            label: 'Kiwi',
            icon: 'marker-pin-target',
            removable: true
        }
    ];

    public onRemove(e: any): void {
        this.log(`remove, ${ e.label }`);
    }

    public selectedChange(e: any): void {
        this.log(`selectedChange, selected indices: ${ e }`);
    }

    private log(event: string): void {
        this.events.push(`${ event }`);
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { AppComponent } from './app.component';
import { EventLogComponent } from './event-log.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent, EventLogComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, ButtonsModule]
})
export class AppModule {}

import { Component, Input } from '@angular/core';

@Component({
  selector: 'event-log',
  template: `
    <div class="example-config">
      <h5>{{ title }}</h5>
      <ul class="event-log">
        <li *ngFor="let event of events.reverse()">{{ event }}</li>
      </ul>
    </div>
  `
})
export class EventLogComponent {
  @Input() title: string;
  @Input() events: string[];
}

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

Functionality and Features

In this article