igniteui-angular-sovn/src/lib/grids/headers/grid-header.component.html

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

<ng-template #defaultColumn>
    <span [title]="title">{{ column.header || column.field }}</span>
</ng-template>

<ng-template #defaultESFHeaderIconTemplate>
    <igx-icon>more_vert</igx-icon>
</ng-template>

<ng-template #defaultSortHeaderIconTemplate>
    <igx-icon>{{ sortDirection < 2 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>
</ng-template>

<span class="igx-grid-th__title">
    <ng-container
        *ngTemplateOutlet="column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}">
    </ng-container>
</span>
<ng-container *ngIf="!column.columnGroup">
    <div class="igx-grid-th__icons">
        <ng-container *ngIf="column.sortable && !disabled">
            <div class="sort-icon"
                [attr.data-sortIndex]="(grid.sortingOptions.mode === 'single' && grid.sortingExpressions.length <=1) ? null : column.field | sortingIndex:grid.sortingExpressions"
                [attr.draggable]="false" (click)="onSortingIconClick($event)" (pointerdown)="$event.stopPropagation()">
                <ng-container *ngTemplateOutlet="sortIconTemplate; context: { $implicit:  this }"></ng-container>
            </div>
        </ng-container>
        <ng-container *ngIf="grid.allowFiltering && column.filterable && grid.filterMode === 'excelStyleFilter'">
            <div [ngClass]="filterIconClassName" (click)="onFilteringIconClick($event)"
                (pointerdown)="$event.stopPropagation()">
                <ng-container *ngTemplateOutlet="esfIconTemplate; context: { $implicit:  this }"></ng-container>
            </div>
        </ng-container>
    </div>
</ng-container>