igniteui-angular-sovn/src/lib/grids/grouping/group-by-area.component.html

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

<igx-chips-area (reorder)="handleReorder($event)" (moveEnd)="handleMoveEnd()">
    <ng-container *ngFor="let expression of chipExpressions; let last = last;">
        <igx-chip
            [id]="expression.fieldName"
            [title]="(expression.fieldName | igxGroupByMeta:grid).title"
            [displayDensity]="grid.displayDensity"
            [removable]="(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable"
            [draggable]="(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable"
            [disabled]="!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable"
            (keyDown)="handleKeyDown($event.owner.id, $event.originalEvent)"
            (remove)="clearGrouping($event.owner.id)"
            (chipClick)="handleClick(expression.fieldName)"
        >
            <span>{{ (expression.fieldName | igxGroupByMeta:grid).title }}</span>
            <igx-icon igxSuffix>{{ expression.dir === 1 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>
        </igx-chip>

        <span class="igx-grid-grouparea__connector">
            <igx-icon [hidden]="(last && !dropAreaVisible)">arrow_forward</igx-icon>
        </span>
    </ng-container>
    <div igxGroupAreaDrop class="igx-drop-area{{ density !== 'comfortable' ? '--' + density : ''}}"
        [attr.gridId]="grid.id"
        [hidden]="!dropAreaVisible"
        (igxDrop)="onDragDrop($event)"
    >
        <ng-container *ngTemplateOutlet="dropAreaTemplate || default"></ng-container>
    </div>
</igx-chips-area>

<ng-template #default>
    <igx-icon class="igx-drop-area__icon">group_work</igx-icon>
    <span class="igx-drop-area__text">{{ dropAreaMessage }}</span>
</ng-template>