How to format timer in Angular

import built-in function formatDate

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

12-Hours format

this.currentDateTime = formatDate(responseData.CreatedDateTime, 'MMM, dd yyyy hh:mm:ss aa', 'en-US');

24-Hours format

this.currentDateTime = formatDate(responseData.CreatedDateTime, 'MMM, dd yyyy HH:mm:ss', 'en-US');

Here is a simple version, showing the time in seconds:

Component:

private timer;
private counter: Date;

ngOnInit() {
  this.timer = Observable.timer(0,1000)
    .subscribe(t => {
      this.counter = new Date(0,0,0,0,0,0);
      this.counter.setSeconds(t);
    });
}

ngOnDestroy(){
  this.timer.unsubscribe();
}

Template:

<div class="client-time">
  <span>Client time</span><br/>
  <strong>{{counter | date:'HH:mm:ss'}} seconds</strong>    
</div>

Use the following pipes as follows

{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

{{datevar | date: 'short'}}

• 'short': equivalent to 'M/d/yy, h:mm a' (6/15/15, 9:03 AM).
• 'medium': equivalent to 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM).
• 'long': equivalent to 'MMMM d, y, h:mm:ss a z' (June 15, 2015 at 9:03:01 AM GMT+1).
• 'full': equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz' (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00).
• 'shortDate': equivalent to 'M/d/yy' (6/15/15).
• 'mediumDate': equivalent to 'MMM d, y' (Jun 15, 2015).
• 'longDate': equivalent to 'MMMM d, y' (June 15, 2015).
• 'fullDate': equivalent to 'EEEE, MMMM d, y' (Monday, June 15, 2015).
• 'shortTime': equivalent to 'h:mm a' (9:03 AM).
• 'mediumTime': equivalent to 'h:mm:ss a' (9:03:01 AM).
• 'longTime': equivalent to 'h:mm:ss a z' (9:03:01 AM GMT+1).
• 'fullTime': equivalent to 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00).

You can use Angular Date Pipe like this:

<div>{{ today | date : 'EEEE, MMMM d, hh:mm:ss a' }}</div>

TS:

today: Date = new Date(2020,3,5,10,9,8);

Output:

Sunday, April 5, 10:09:08 AM

Working Demo

here hh, mm, ss will make sure you have two digits even when value is less than 10