import { Component , EventEmitter , Input , OnChanges , OnDestroy , OnInit , Output , } from '@angular/core' ; import { Subscription } from 'rxjs' ; import { tap } from 'rxjs/operators' ; import { CountdownService } from 'app/shared/services/countdown.service' ; @ Component ( { selector : 'app-countdown' , templateUrl : './countdown.component.html' , styleUrls : [ './countdown.component.scss' ] , } ) export class CountdownComponent implements OnInit , OnDestroy , OnChanges { @ Input ( ) hour : number ; @ Input ( ) minute : number ; @ Output ( ) onCountdownStart : EventEmitter < void > = new EventEmitter < void > ( ) ; @ Output ( ) onCountdownEnd : EventEmitter < void > = new EventEmitter < void > ( ) ; public countdown : string ; private countdownSub : Subscription ; constructor ( private countdownService ) { } ngOnInit ( ) { } ngOnChanges ( ) { if ( this . countdownSub ) { this . countdownSub . unsubscribe ( ) ; } let hasEmittedCountdownStart = false ; this . countdownSub = this . countdownService . getCountdownTo ( this . hour , this . minute ) . pipe ( tap ( countdown => { if ( ! hasEmittedCountdownStart ) { hasEmittedCountdownStart = true ; this . onCountdownStart . next ( ) ; } this . countdown = countdown ; } ) ) . subscribe ( ( ) => { } , ( ) => { } , ( ) => { this . countdown = '' ; this . onCountdownEnd . next ( ) ; } ) ; } ngOnDestroy ( ) { this . onCountdownEnd . next ( ) ; this . countdownSub . unsubscribe ( ) ; } }