igniteui-angular-sovn/src/lib/chips/chip.component.html

Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps

<div #chipArea class="igx-chip__item"
    [igxDrag]="{chip: this}"
    [style.visibility]='hideBaseElement ? "hidden" : "visible"'
    [ghostClass]="ghostClass"
    (dragStart)="onChipDragStart($event)"
    (ghostCreate)="onChipGhostCreate()"
    (ghostDestroy)="onChipGhostDestroy()"
    (dragEnd)="onChipDragEnd()"
    (transitioned)="onChipMoveEnd($event)"
    (dragClick)="onChipDragClicked($event)"
    igxDrop
    (enter)="onChipDragEnterHandler($event)"
    (leave)= "onChipDragLeaveHandler($event)"
    (over)="onChipOverHandler($event)"
    (dropped)="onChipDrop($event)">

    <div class="igx-chip__start" #selectContainer>
        <div *ngIf="selected" [ngClass]="selectClass(selected)">
            <ng-container *ngTemplateOutlet="selectIconTemplate"></ng-container>
        </div>

        <ng-content select="igx-prefix,[igxPrefix]"></ng-content>
    </div>

    <div class="igx-chip__content">
        <ng-content></ng-content>
    </div>

    <div class="igx-chip__end">
        <ng-content select="igx-suffix,[igxSuffix]"></ng-content>

        <div class="igx-chip__remove" *ngIf="removable"
            [attr.tabIndex]="tabIndex"
            (keydown)="onRemoveBtnKeyDown($event)"
            (pointerdown)="onRemoveMouseDown($event)"
            (mousedown)="onRemoveMouseDown($event)"
            (click)="onRemoveClick($event)"
            (touchmove)="onRemoveTouchMove()"
            (touchend)="onRemoveTouchEnd($event)">
            <ng-container *ngTemplateOutlet="removeButtonTemplate"></ng-container>
        </div>
    </div>
</div>

<ng-template #defaultSelectIcon>
    <igx-icon [attr.aria-label]="resourceStrings.igx_chip_select">done</igx-icon>
</ng-template>

<ng-template #defaultRemoveIcon>
    <igx-icon [attr.aria-label]="resourceStrings.igx_chip_remove">cancel</igx-icon>
</ng-template>