How to filter Angular Material table field with value timestamp?

Question

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>

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

Timothy · Answer 1 · 2020-11-11T10:03:13.567

1

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>

edited Nov 11 '20 at 10:03

answered Nov 11 '20 at 08:31

Timothy

3,213
2
21
34

thanks @Timothy for your time & replay. When we type 'nov 10' there wont be any matching records on dataSource, since we are using pipe and the actual data is timestamp will it work in case of filtering? – Tony Nov 11 '20 at 08:36
date pipe will not change dataSource, it will only change display of element.date. – Timothy Nov 11 '20 at 08:39
You can filter it with a combination of ngIf and pipe. Updated my answer – Timothy Nov 11 '20 at 10:01

score 1 · Accepted Answer · answered Nov 11 '20 at 11:20

1

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

stackblitz

answered Nov 11 '20 at 11:20

David

34
2

While this code may answer the question, it is a good practice to include the relevant code on the answer itself. Including only a link to the code with the relevant bits makes the question incomplete and renders it useless if the hyperlink stops working or is no longer reachable in the future – blurfus Nov 11 '20 at 19:00

score 0 · Answer 3 · edited Nov 11 '20 at 08:40

0

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;
}

edited Nov 11 '20 at 08:40

Dharman

30,962
25
85
135

answered Nov 11 '20 at 08:35

Marco Bertelli

343
1
9

How to filter Angular Material table field with value timestamp?

3 Answers3