Angular Chips - Simple & Flexible Visual Component

<div class="control-section">
    <div id="chip-default-wrapper">
        <div class="chips-headers">Chips</div>
        <div class="sample-padding">
            <ejs-chiplist id="chip-default">
                <e-chips>
                    <e-chip text="Apple" cssClass="e-primary"></e-chip>
                    <e-chip text="Microsoft" cssClass="e-info"></e-chip>
                    <e-chip text="Google" cssClass="e-success"></e-chip>
                </e-chips>
            </ejs-chiplist>
        </div>
        <div class="separator"></div>
        <div class="chips-headers">Input Chips</div>
        <div class="sample-padding">
            <ejs-chiplist id="chip-avatar" enableDelete="true">
                <e-chips>
                    <e-chip text="Anne" leadingIconCss="anne"></e-chip>
                    <e-chip text="Janet" leadingIconCss="janet"></e-chip>
                    <e-chip text="Laura" leadingIconCss="laura"></e-chip>
                </e-chips>
            </ejs-chiplist>
        </div>
        <div class="separator"></div>
        <div class="chips-headers">Filter Chips</div>
        <div class="sample-padding">
            <ejs-chiplist id="chip-filter" selection="Multiple" [selectedChips]="this.filterSelected">
                <e-chips>
                    <e-chip text="Extra small"></e-chip>
                    <e-chip text="Small"></e-chip>
                    <e-chip text="Medium"></e-chip>
                </e-chips>
            </ejs-chiplist>
        </div>
        <div class="separator"></div>
        <div class="chips-headers">Choice Chips</div>
        <div class="sample-padding">
            <ejs-chiplist id="chip-choice" selection="Single" cssClass="e-outline" [selectedChips]="this.choiceSelected">
                <e-chips>
                    <e-chip text="Send a text" avatarIconCss="text"></e-chip>
                    <e-chip text="Set a remainder" avatarIconCss="alarm"></e-chip>
                    <e-chip text="Read my emails" avatarIconCss="mail"></e-chip>
                    <e-chip text="Play a game" avatarIconCss="game"></e-chip>
                </e-chips>
            </ejs-chiplist>
        </div>
    </div>
</div>

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
    selector: 'control-content',
    templateUrl: 'default.html',
    styleUrls: ['default.css'],
    encapsulation: ViewEncapsulation.None
})
export class DefaultChipsComponent {
    choiceSelected = [1];
    filterSelected = [1, 3];
}