The timer counts down in Angular

The timer counts down in Angular using pipe

You can 'listen' to the timer and trigger the action when the countdown is 0. And to display the timer, use a pipe

HTML

<h2>{{countDown | async | formatTime}}</h2>

<button [disabled]="counter == 0">OK</button>

TypeScript

  countDown;
  counter = 30*60;
  tick = 1000;
  ngOnInit() {
    this.countDown = Observable.timer(0, this.tick)
      .take(this.counter)
      .map(() => --this.counter)
  }

if you using Rxjs version upper 6.x you need to import.

import { Observable, of, timer } from 'rxjs';

Pipe

For =>  MM:SS format

//for MM:SS format

@Pipe({
  name: 'formatTime'
})
export class FormatTimePipe implements PipeTransform {

    transform(value: number): string {
      const minutes: number = Math.floor(value/60);
      return ('00'+ minutes).slice(2) + ':' + ('00'+Math.floor(value-minutes * 60)).slice(2);
    }

}

For =>  HH:MM:SS format

//for HH:MM:SS format

transform(value: number): string {
    const hours: number = Math.floor(value / 3600);
    const minutes: number = Math.floor((value % 3600) / 60);
    return ('00' + hours).slice(2) + ':' + ('00' + minutes).slice(-2) + ':' + ('00' + Math.floor(value - minutes * 60)).slice(-2);
}

---

If you wish to use a service:

Service

 ...
 getCounter() {
    return Observable.timer(0, this.tick)
      .take(this.counter)
      .map(() => --this.counter)
  }
 ...

Component

@Component({
  ...
  providers: [MyService]
})
...
constructor(private myService: MyService) {}
ngOnInit(){
    this.countDown = this.myService.getCounter().do(() => --this.counter);
    //or 
    //this.countDown = myService.getCounter();
}
...

Pipe

  ...  
  transform(value: number): string {
    //MM:SS format
    const minutes: number = Math.floor(value / 60);
    return ('00' + minutes).slice(-2) + ':' + ('00' + Math.floor(value - minutes * 60)).slice(-2);

    // for HH:MM:SS
    //const hours: number = Math.floor(value / 3600);
    //const minutes: number = Math.floor((value % 3600) / 60);
    //return ('00' + hours).slice(-2) + ':' + ('00' + minutes).slice(-2) + ':' + ('00' + Math.floor(value - minutes * 60)).slice(-2);

  }

Complete component



import { Component, OnInit } from '@angular/core';

import { Observable } from 'rxjs/Observable'

import 'rxjs/add/observable/timer'

import 'rxjs/add/operator/map'

import 'rxjs/add/operator/take'

import { Pipe, PipeTransform } from '@angular/core';

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit {

  countDown;

  counter = 60;

  tick = 1000;

  ngOnInit() {

    this.countDown = Observable.timer(0, this.tick)

      .take(this.counter)

      .map(() => --this.counter)

  }

}

@Pipe({

  name: 'formatTime'

})

export class FormatTimePipe implements PipeTransform {

  transform(value: number): string {

    const minutes: number = Math.floor(value / 60);

    return ('00' + minutes).slice(-2) + ':' + ('00' + Math.floor(value - minutes * 60)).slice(-2);

  }

DEMO