Hey guys,
according to
https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/filtering#re-templating-filter-cell
<ng-template #defaultFilterTemplate igxFilterCellTemplate let-column="column"> <div class="filter-cell"> <igx-input-group #inputGr class="filter-input" type="box" [displayDensity]="'compact'"> <igx-prefix> <igx-icon>search</igx-icon> </igx-prefix> <input #input igxInput tabindex="0" placeholder="Filter..." autocomplete="off" [value]="getFilterValue(column)" (input)="onInput(input, column)" (click)="onClick(inputGr)" (keydown)="onKeyDown($event)"/> <igx-suffix *ngIf="input.value || input.value === 0" (click)="clearInput(column)" tabindex="0"> <igx-icon>clear</igx-icon> </igx-suffix> </igx-input-group> </div> </ng-template>
we already re-templated some filters and it's working so far. But we have plenty of grids that should use the same kind of filters => Can it be reused without copy-paste? An own component or something like that?
My current approach is another component, that is reused inside the ng-template part (with ng-template it didn't work:Component IgxTextFilterTemplateComponent> TS part:
@Component({ selector: "my-igx-text-filter-template", templateUrl: "./igx-text-filter-template.component.html", styleUrls: ["./igx-text-filter-template.component.scss"] }) export class IgxTextFilterTemplateComponent { myIgxGridHelper: MyIgxGridHelper = null; private _grid: IgxGridComponent = null; @Input() set grid(grid: IgxGridComponent) { this._grid = grid; this.myIgxGridHelper = new MyIgxGridHelper(this._grid); } private _column: IgxColumnComponent = null; get column(): IgxColumnComponent { return this._column; } @Input() set column(column: IgxColumnComponent) { this._column = column; } }
> HTML part
<div class="filter-cell"> <igx-input-group #inputGr [displayDensity]="'compact'" class="filter-input" type="box"> <igx-prefix> <igx-icon>search</igx-icon> </igx-prefix> <input #input (click)="myIgxGridHelper.setFocusOnFilter(inputGr)" (input)="myIgxGridHelper.onFilterInput(input, column)" (keydown)="myIgxGridHelper.onFilterKeyDown($event)" [value]="myIgxGridHelper.getFilterValue(column)" autocomplete="off" igxInput placeholder="{{'FILTER'| translate}}" tabindex="0"/> <igx-suffix (click)="myIgxGridHelper.clearFilterInput(column)" *ngIf="input.value || input.value === 0" id="{{ 'filter_' + column.field + '_clear'}}" tabindex="0"> <igx-icon>clear</igx-icon> </igx-suffix> </igx-input-group> </div>
As a drawback, the grid itself and the matching column must be injected... Is there a better way without passing the column + grid?Can the grid be accessed via column? Then there wouldn't be a need to pass the grid.
In the component, that reuses the filter, it looks like this:
<igx-grid #grid ...> </igx-grid> <ng-template #textFilterTemplate igxFilterCellTemplate let-column="column"> <my-igx-text-filter-template [column]="column" [grid]="grid"> </my-igx-text-filter-template> </ng-template>
Hello,
I have been looking into your question and prepared a small sample in order to demonstrate how such behavior could be achieved.
In case all grids are in the same component there is no need to define this template more than once or copy/paste it. You could define it once and set it as filterCellTemplate to the required columns even if they are in different grids.
If the grids are in different components, in order to create the template only once and pass it to some component that contains a grid, my suggestion is to declare an input of the grid components and using it to pass the template you require.
Also, in case you require the template content to be in different component, you could pass using input only the column component. After that the grid could be accessed using column.gridAPI.grid.
<grid-sample [filterTemplate]="defaultFilterTemplate"></grid-sample> <ng-template #defaultFilterTemplate igxFilterCellTemplate let-column="column"> <app-filter-cell [gridColumn]="column"></app-filter-cell> </ng-template>
Additionally, please keep in mind that Angular template and component bindings are out of the scope of our support since they are not directly related to our product.
Here could be found my sample for your reference. Please test it on your side and let me know if I may be of any further assistance.
Sincerely,Teodosia HristodorovaAssociate Software Developer
Thank you, that's all I need.
I am glad that you find my suggestion helpful.
Thank you for using Infragistics components.
Regards,Teodosia HristodorovaAssociate Software Developer