CODEWITHSUNDEEP
angularangular-materialmat-table
Tony
Tony

Reputation: 910

How to filter Angular Material table field with value timestamp?

dataSource

    [
        {name:'User1',date:1605082722360},
        {name:'User2',date:1605022729782}
    ]

list.component.html

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Name </th>
            <td mat-cell *matCellDef="let element" [attr.title]="element.name">{{element.name}}</td>
        </ng-container>
        <ng-container matColumnDef="date">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Date </th>
            <td mat-cell *matCellDef="let element" [attr.title]="element.date">{{element.date | date}}</td>
        </ng-container>
</table>

enter image description here

please help me to filter mat-table, for example nov 10 from above dataSource?

Upvotes: 2

Views: 1602

Answers (3)

David
David

Reputation: 34

setting the custom filterPredicate method helps you to solve this issue, please refer the stackblitz link mentioned below

stackblitz

Upvotes: 1

Timothy
Timothy

Reputation: 3593

You can define date format in date pipe https://angular.io/api/common/DatePipe

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
        <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Name </th>
            <td mat-cell *matCellDef="let element" [attr.title]="element.name">{{element.name}}</td>
        </ng-container>
        <ng-container matColumnDef="date">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Date </th>
            <td mat-cell *matCellDef="let element" [attr.title]="element.date">{{element.date | date:'MMM d'}}</td>
        </ng-container>
</table>

To filter out by date you do something like

<ng-container *ngIf="element.date | date:'MMM d' === 'Nov 10'"><ng-container>

Upvotes: 1

Marco Bertelli
Marco Bertelli

Reputation: 425

my response is to use the bests practice and call the data filter in the http call pass the data like a parameters es:

http://your-call?data=....

but if you don't want to do it i suggest you tu use a local variable in the .ts file like :

html:

//in the stamp of row of your table 
<div *ngIf="element.data==local-data">

in the ts:

local-data;
passData(data){
this.local-data=data;
}

Upvotes: 0

Related Questions