igniteui-angular-sovn/src/lib/grids/toolbar/grid-toolbar-pinning.component.html

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

<ng-container *ngIf="grid.rendered$ | async">
    <button [title]="grid?.resourceStrings.igx_grid_toolbar_pinning_button_tooltip" #btn igxButton="outlined" type="button"
        name="btnColumnPinning" (click)="toggle(btn, ref, actions)" [displayDensity]="grid.displayDensity">
        <igx-icon family="imx-icons" [name]="!grid.pinnedColumnsCount ? 'unpin-left' : 'pin-left'"></igx-icon>
        <span>{{ grid.pinnedColumnsCount }}</span>
        <span>{{ buttonText }}</span>
    </button>
    <igx-column-actions #actions igxColumnPinning igxToggle (opened)="focusSearch(ref.element)" #ref="toggle"
        [grid]="grid" [title]="title || grid?.resourceStrings.igx_grid_toolbar_pinning_title"
        [filterColumnsPrompt]="prompt || grid?.resourceStrings.igx_grid_toolbar_actions_filter_prompt"
        [hideFilter]="hideFilter" [filterCriteria]="filterCriteria" [columnDisplayOrder]="columnDisplayOrder" [columnsAreaMaxHeight]="columnsAreaMaxHeight"
        [uncheckAllText]="uncheckAllText" [checkAllText]="checkAllText" [indentation]="indentetion">
    </igx-column-actions>
</ng-container>