igniteui-angular-sovn
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
34 lines (30 loc) • 1.46 kB
HTML
<div class="igx-column-actions__header">
<h4 [attr.id]='titleID' class="igx-column-actions__header-title" *ngIf="title">{{ title }}</h4>
<igx-input-group class="igx-column-actions__header-input" *ngIf="!hideFilter">
<input igxInput
type="text"
[attr.aria-describedby]='titleID'
[(ngModel)]="filterCriteria"
[placeholder]="filterColumnsPrompt"
autocomplete="off" />
</igx-input-group>
</div>
<div class="igx-column-actions__columns" tabindex="0"
[style.max-height]="columnsAreaMaxHeight">
<igx-checkbox
*ngFor="let column of $any(grid)?._columns
| columnActionEnabled:actionsDirective.actionEnabledColumnsFilter:pipeTrigger
| filterActionColumns:filterCriteria:pipeTrigger
| sortActionColumns:columnDisplayOrder:pipeTrigger;"
class="igx-column-actions__columns-item"
[readonly]="true"
(click)="toggleColumn(column)"
[checked]="actionsDirective.columnChecked(column)"
[style.margin-left.px]="column.level * indentation">
{{ column.header || column.field }}
</igx-checkbox>
</div>
<div class="igx-column-actions__buttons">
<button igxButton igxRipple (click)="uncheckAllColumns()" [disabled]="uncheckAllDisabled">{{ uncheckAllText }}</button>
<button igxButton igxRipple (click)="checkAllColumns()" [disabled]="checkAllDisabled">{{ checkAllText }}</button>
</div>