igniteui-angular-sovn/src/lib/grids/filtering/base/grid-filtering-cell.component.html

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

<ng-template #emptyFilter>
    <igx-chips-area [attr.draggable]="false" class="igx-filtering-chips">
        <igx-chip #ghostChip [attr.draggable]="false" (click)="onChipClicked()" [displayDensity]="displayDensity" [tabIndex]="-1">
            <igx-icon [attr.draggable]="false" igxPrefix>filter_list</igx-icon>
            <span [attr.draggable]="false">{{filteringService.grid.resourceStrings.igx_grid_filter}}</span>
        </igx-chip>
    </igx-chips-area>
</ng-template>

<ng-template #defaultFilter>
    <igx-chips-area #chipsArea class="igx-filtering-chips">
        <ng-container *ngFor="let item of expressionsList; let last = last; let index = index;" >
            <igx-chip *ngIf="isChipVisible(index)"
                [removable]="true"
                [tabIndex]="-1"
                [displayDensity]="displayDensity"
                (click)="onChipClicked(item.expression)"
                (remove)="onChipRemoved($event, item)">
                <igx-icon igxPrefix
                    family="imx-icons"
                    [name]="item.expression.condition.iconName">
                </igx-icon>
                <span #label>
                    {{filteringService.getChipLabel(item.expression)}}
                </span>
            </igx-chip>
            <span class="igx-filtering-chips__connector" *ngIf="!last && isChipVisible(index + 1)">{{filteringService.getOperatorAsString(item.afterOperator)}}</span>
        </ng-container>
        <div #moreIcon [ngClass]="filteringIndicatorClass()" (click)="onChipClicked()">
            <igx-icon>filter_list</igx-icon>
            <igx-badge [value]="moreFiltersCount"></igx-badge>
        </div>
    </igx-chips-area>
</ng-template>

<ng-template #complexFilter>
    <igx-chip #complexChip [removable]="true" [displayDensity]="displayDensity" (remove)="clearFiltering()" [tabIndex]="-1">
        <igx-icon igxPrefix>filter_list</igx-icon>
        <span>{{filteringService.grid.resourceStrings.igx_grid_complex_filter}}</span>
    </igx-chip>
</ng-template>

<ng-container *ngTemplateOutlet="template; context: context"></ng-container>