How to put dynamic search box on a table with Angular?

Question

I have a table and I want to put a search box on top of the table which dynamically search in table data and filter it for enabling user to find table for easier.

my table code is:

<mat-card class="fields-list" *ngIf="tableShown">
      <mat-card-content>
        <mat-card-actions align="end">
          <button type="button" class="topia-btn topia-primary-btn action-buttons" (click)="addClicked()">
            Add New Office
          </button>
        </mat-card-actions>
        <mat-table #table [dataSource]="officePinList">
          <ng-container cdkColumnDef="label">
            <mat-header-cell *cdkHeaderCellDef fxFlex="20%">Label</mat-header-cell>
            <mat-cell *cdkCellDef="let officePin" fxFlex="20%">{{officePin.label}}</mat-cell>
          </ng-container>

          <ng-container cdkColumnDef="postalAddress">
            <mat-header-cell *cdkHeaderCellDef fxFlex="55%">Postal Adress</mat-header-cell>
            <mat-cell *cdkCellDef="let officePin" fxFlex="55%">{{officePin.postalAddress}}</mat-cell>
          </ng-container>

          <ng-container cdkColumnDef="trash-icon">
            <mat-header-cell *cdkHeaderCellDef fxFlex="15%"></mat-header-cell>
            <mat-cell *cdkCellDef="let officePin" fxFlex="15%">
              <mat-icon (click)="deleteGroupOffices(officePin.id)" mat-list-icon matTooltip="Delete" class="icon">
                delete_forever
              </mat-icon>
              <mat-icon (click)="editField(officePin.id)" mat-list-icon matTooltip="Edit" class="icon">edit</mat-icon>
            </mat-cell>
          </ng-container>

          <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row class="table-row" *cdkRowDef="let officePin; columns: displayedColumns;"></mat-row>

        </mat-table>

My table data source is officePinList

How can I filter table data with dynamic search box for the table exactly like this: https://ciphertrick.com/demo/angularajaxsearch/

Amir Arbabian · Accepted Answer · 2019-02-02 21:04:07Z

3

Just add an input search box:

Html

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>

And afterwards you need to add method that actually adds filter to your source:

Ts

applyFilter(filterValue: string) {
  this.officePinList.filter = filterValue.trim().toLowerCase();
}

Hope that helps.

answered Feb 2, 2019 at 21:04

Amir Arbabian

3,7092 gold badges9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Chris Garsonn Over a year ago

ts part is having error. TS2322. type string cannot be assignable to ....

Amir Arbabian Over a year ago

What type is your officePinList source? Is it MatTableDataSource?

Chris Garsonn Over a year ago

officePinList: OfficePin[]; it is a list containing models called OfficePin

Amir Arbabian Over a year ago

try to change it to type officePinList = new MatTableDataSource(data) where data is array of type OfficePin[]

Chris Garsonn Over a year ago

when I change filtervalue string to officePin then trim is giving error as property trim does not exist on type OfficePin ts2339

|

Collectives™ on Stack Overflow

How to put dynamic search box on a table with Angular?

1 Answer 1

Html

Ts

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Html

Ts

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related