Modify DateTime receiving from response and show only the date in mat-table

Question

I'm currently using mat-table to show my api response. But for the date, time is also attached. I want to omit the time part and show only the date in mat-table. How to achieve this ?

service.ts

getNotifications() {
    const token = this.authService.getToken();
    let headerOptions = new HttpHeaders({
      'Content-Type': 'application/json',
            'Accept': 'application/json',
      'Authorization': 'Bearer '+token
    });

    const url = environment.baseURL + 'notifications';

    return this.http.get<any>(url, {headers: headerOptions})
      .pipe(map(notifications => {
        return notifications.result;
      }));
  }

Component.ts

getNotifications(){     
    this.notificationService.getNotifications()
            .pipe(first())
            .subscribe(
                data => {
                  this.notifications = <Notification[]>data;
                  this.dataSource = new MatTableDataSource();
                  this.dataSource.data = data;
                  this.dataSource.paginator = this.paginator;
                },
                error => {
                  console.log("An Error Occurred");
                });
  }

API Response:

Updated section:

component.html

    <section class="container-fluid pwb-section-body">
            <table mat-table [dataSource]="dataSource" class="mat-elevation-z1 pwb-table">

                <!--- Note that these columns can be defined in any order.
                  The actual rendered columns are set as a property on the row definition" -->


                <!-- Name Column -->
                <ng-container matColumnDef="title">
                    <th mat-header-cell *matHeaderCellDef style="width: 30%;"> Title </th>
                    <td mat-cell *matCellDef="let element"> {{element.title}} </td>
                </ng-container>

                <!-- Weight Column -->
                <ng-container matColumnDef="description">
                    <th mat-header-cell *matHeaderCellDef style="width: 40%;"> Body Text </th>
                    <td mat-cell *matCellDef="let element"> {{element.description}} </td>
                </ng-container>

<ng-container matColumnDef="created_at">
                <th mat-header-cell *matHeaderCellDef style="width: 10%;"> Start Date </th>
                <td mat-cell *matCellDef="let element"> {{element.created_at}} </td>
            </ng-container>


                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
        </section>

Can you give us an excerpt of the template ? You may need to use https://angular.io/api/common/DatePipe. — serrulien, Feb 02 '20 at 17:39

score 1 · Answer 1 · answered Feb 02 '20 at 19:01

You can use DatePipe to do the conversion, in your component.ts

import { DatePipe } from '@angular/common';

and inject in your constructor

(private datePipe: DatePipe)

and use it in the HTML as,

 <span class="ah-admin-value">{{datePipe.transform({element.created_at,"dd/MM/yyyy hh:mm")}}</span>

Modify DateTime receiving from response and show only the date in mat-table

1 Answers1