Getting Started with Kendo UI for Angular Chip

The Chip component allows users to enter information, make selections, filter content, or trigger actions.

Basic Usage

The following example demonstrates the Chip in action.

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

import { AutoCompleteComponent } from '@progress/kendo-angular-dropdowns';
import { ChipComponent } from '@progress/kendo-angular-buttons';

@Component({
    selector: 'my-app',
    template: `
        <div class="k-block">
            <kendo-chip
                *ngFor="let contact of selectedContacts"
                [label]="contact.label"
                class="my-chip"
                [removable]="true"
                [iconClass]="contact.iconClass"
                (remove)="onRemove($event)"
            >
            </kendo-chip>
            <div class="example">
                <kendo-autocomplete
                    #contactslist
                    [data]="contacts"
                    class="contacts"
                    [valueField]="'label'"
                    [kendoDropDownFilter]="{operator: 'contains'}"
                    [filterable]="true"
                    [placeholder]="'To: Email Adress*'"
                    (valueChange)="valueChange($event)"
                >
                </kendo-autocomplete>
                <textarea class="k-textarea">Hi there! Don’t miss out our dinner party!</textarea>
            </div>
        </div>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        .k-block {
            min-height: 300px;
            padding: 20px;
        }
        .k-textarea {
            width: 100%;
            min-height: 145px;
        }
        .contacts {
            border-width: 0 0 1px 0;
            width: 100%;
            margin: 30px 0;
        }
        .contacts.k-state-focused {
            box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.03);
        }
        .pedro {
            background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/SPLIR.jpg");
        }
        .thomas {
            background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg");
        }
        .christina {
            background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/BERGS.jpg");
        }
        .paula {
            background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/RATTC.jpg");
        }
        .maria {
            background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/ALFKI.jpg");
        }
        .yang {
            background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/CHOPS.jpg");
        }
        .anna {
            background-image: url("https://demos.telerik.com/kendo-ui/content/web/Customers/EASTC.jpg");
        }
    `]
})

export class AppComponent {
    @ViewChild('contactslist') public list: AutoCompleteComponent;

    public contacts: Array<{ label: string, iconClass: string }> = [
        { label: 'Pedro Afonso', iconClass: 'k-chip-avatar pedro'},
        { label: 'Maria Shore', iconClass: 'k-chip-avatar maria' },
        { label: 'Thomas Hardy', iconClass: 'k-chip-avatar thomas' },
        { label: 'Christina Berg', iconClass: 'k-chip-avatar christina' },
        { label: 'Paula Wilson', iconClass: 'k-chip-avatar paula' }
    ];

    public selectedContacts: Array<any> = [this.contacts[1]];

    public valueChange(contact: string): void {
        if (contact === '') { return; }

        const contactData = this.contacts.find((c) => c.label === contact);

        if (!this.selectedContacts.includes(contactData)) {
            this.selectedContacts.push(contactData);
        }

        this.list.reset();
    }

    public onRemove(chip: ChipComponent): void {
        const index = this.selectedContacts.map(c => c.label).indexOf(chip.label);
        this.selectedContacts.splice(index, 1);
    }
}
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 { DropDownsModule } from '@progress/kendo-angular-dropdowns';

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

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, ButtonsModule, DropDownsModule]
})
export class AppModule {}
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

Functionality and Features

Events

The following example demonstrates basic Chip events.

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

@Component({
    selector: 'my-app',
    template: `
        <p>
            <kendo-chip
                [label]="'My Chip'"
                [removable]="true"
                (click)="onClick()"
                (focus)="onFocus()"
                (blur)="onBlur()"
                (remove)="onRemove($event)">
            </kendo-chip>
        </p>
        <event-log title="Event log" [events]="events"></event-log>
    `
})

export class AppComponent {
    public events: string[] = [];

    public onClick(): void {
        this.log('click');
    }

    public onFocus(): void {
        this.log('focus');
    }

    public onBlur(): void {
        this.log('blur');
    }

    public onRemove(): void {
        this.log('remove');
    }

    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 });

In this article