angular - Clarity datagrid built-in filter is not working

Question

I have a component template defined below:

<div class="flex-fill flex-container flex-column default-padding">
  <clr-datagrid class="flex-fill" [clrDgSingleSelected]="selectedItem | async" (clrDgSingleSelectedChange)="setSelectedItem($event)" [clrDgLoading]="loadingInProgress | async">
    <clr-dg-action-bar class="flex-row justify-content-space-between">
      <div class="flex-auto ">
        <div class="btn-group">
          <button (click)="setIsCreateDialogOpen(true)" class="btn btn-sm btn-success" type="button">
            <clr-icon shape="add"></clr-icon>
            Test Item
          </button>
        </div>
        <div class="btn-group">
        </div>
        <div class="btn-group">
        </div>
      </div>

    </clr-dg-action-bar>

    <clr-dg-column [clrDgField]="'name'">Name</clr-dg-column>
    <clr-dg-column>Address</clr-dg-column>

    <clr-dg-row *ngFor="let item of Items | async" [clrDgItem]="item.name">
      <clr-dg-cell><a [routerLink]="item.name" queryParamsHandling="merge" [queryParams]="{a: 'A', reference: undefined}"> {{item.name}}</a></clr-dg-cell>
      <clr-dg-cell>{{item.Address}}</clr-dg-cell>
    </clr-dg-row>
    <clr-dg-footer>{{(Items | async)?.length}} Items</clr-dg-footer>
  </clr-datagrid>
</div>

I'm trying to use the [clrDgField] attribute to enable the filter. I can see the filter icon on the column but when I type something in, no filtering whatever happens. I'm using clarity design system.

I tried the same with a filer defined like:

<clr-dg-column>Name
  <clr-dg-string-filter [clrDgStringFilter]="itemFilter"></clr-dg-string-filter>
</clr-dg-column>

where itemFilter is

class ItemNameFilter implements ClrDatagridStringFilterInterface<Item> {
  accepts(item: Item, search: string): boolean {
    return item.name.toLocaleLowerCase().includes(search.toLocaleLowerCase());
  }
}

which is still not giving any result.

question from:https://stackoverflow.com/questions/65652336/clarity-datagrid-built-in-filter-is-not-working

Answer 1

Waitting for answers