38 lines
		
	
	
		
			880 B
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
			
		
		
	
	
			38 lines
		
	
	
		
			880 B
		
	
	
	
		
			TypeScript
		
	
	
	
	
	
// #docregion
 | 
						|
import { Component, OnDestroy, OnInit } from '@angular/core';
 | 
						|
 | 
						|
@Component({
 | 
						|
  selector:'countdown-timer',
 | 
						|
  template: '<p>{{message}}</p>'
 | 
						|
})
 | 
						|
export class CountdownTimerComponent implements OnInit, OnDestroy {
 | 
						|
 | 
						|
  intervalId = 0;
 | 
						|
  message = '';
 | 
						|
  seconds = 11;
 | 
						|
 | 
						|
  clearTimer() {clearInterval(this.intervalId);}
 | 
						|
 | 
						|
  ngOnInit()    { this.start(); }
 | 
						|
  ngOnDestroy() { this.clearTimer(); }
 | 
						|
 | 
						|
  start() { this.countDown(); }
 | 
						|
  stop()  {
 | 
						|
    this.clearTimer();
 | 
						|
    this.message = `Holding at T-${this.seconds} seconds`;
 | 
						|
  }
 | 
						|
 | 
						|
  private countDown() {
 | 
						|
    this.clearTimer();
 | 
						|
    this.intervalId = setInterval(()=>{
 | 
						|
      this.seconds -= 1;
 | 
						|
      if (this.seconds == 0) {
 | 
						|
        this.message = "Blast off!";
 | 
						|
      } else {
 | 
						|
        if (this.seconds < 0) { this.seconds = 10;} // reset
 | 
						|
        this.message = `T-${this.seconds} seconds and counting`;
 | 
						|
      }
 | 
						|
    }, 1000);
 | 
						|
  }
 | 
						|
}
 |