Content

The Chip provides options for specifying its content.

To configure the content, use any of the following approaches:

• Pass a string
• Custom content

Passing a String

Passing a string to the label field is the basic way to display a chip text. The text that is passed represents the rendered content of the chip.

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

import { ChipComponent, ChipRemoveEvent } from '@progress/kendo-angular-button';

@Component({
    selector: 'my-app',
    template: `
        <p>Passing a String</p>

        <kendo-chip
            *ngFor="let chip of chips"
            [label]="chip.label"
            [removable]="chip.removable"
            (remove)="onRemove($event)"
        >
        </kendo-chip>
    `,
    styles: [`
        .k-chip {
            margin-right: 10px;
         }
    `],
    encapsulation: ViewEncapsulation.None
})
class AppComponent {
    public chips = [
        {
            label: 'Apple',
            selected: false,
            removable: true
        },
        {
            label: 'Strawberry',
            selected: false,
            removable: true
        },
        {
            label: 'Banana',
            selected: false,
            removable: true
        },
        {
            label: 'Kiwi',
            selected: false,
            removable: true
        }
    ];

    public onRemove(e: ChipRemoveEvent): void {
        const index = this.chips.findIndex(c => c.label === e.sender.label);
        this.chips.splice(index, 1);
    }
}

Custom Content

You can also define any custom content as a label between <kendo-chip> tags.

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

import { ChipComponent, ChipRemoveEvent } from '@progress/kendo-angular-button';

@Component({
    selector: 'my-app',
    template: `
        <p>Custom Content</p>

        <kendo-chip
            *ngFor="let chip of chips"
            [removable]="chip.removable"
            (remove)="onRemove($event)"
        >
            <span class="custom-content">{{ chip.label }}</span>
        </kendo-chip>
    `,
    styles: [`
        .k-chip {
            margin-right: 10px;
         }
        .custom-content {
            color: #3366cc;
            font-weight: bold;
        }
    `],
    encapsulation: ViewEncapsulation.None
})
class AppComponent {
    public chips = [
        {
            label: '7:00',
            selected: false,
            removable: true
        },
        {
            label: '12:30',
            selected: false,
            removable: true
        },
        {
            label: '18:00',
            selected: false,
            removable: true
        },
        {
            label: '22:30',
            selected: false,
            removable: true
        }
    ];

    public onRemove(e: ChipRemoveEvent): void {
        const label = e.sender.element.nativeElement.innerText;
        const index = this.chips.findIndex(c => c.label === label);
        this.chips.splice(index, 1);
    }
}

Suggested Links

• API Reference of the Chip