Animated Countdown Timer angular component code example

Example: angular countdown timer

// Iinstall the timer package from NPM
$ npm install angular-countdown-timer --save

// Import the countdown timer module
import { NgModule } from '@angular/core';
import { CountdownTimerModule } from 'angular-countdown-timer';
 
@NgModule({
  imports: [
    CountdownTimerModule.forRoot()
  ]
})
export class YourModule { }

// Your component TS file
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-your',
  templateUrl: './your.component.html',
  styleUrls: [ './your.component.css' ]
})
export class YourComponent  {
  date = new Date('2019-01-26T00:00:00');
  
  triggerFunction() {
    console.log('Timer Ended');
  }
  
}

// Use the timer in your component html 
<h1>{{title}}</h1>

Timer mode:
<countdown-timer [start]="date"></countdown-timer>
 
Countdown:
<countdown-timer [end]="date"></countdown-timer>
 
Countdown with zero trigger:
<countdown-timer (zeroTrigger)="triggerFunction()" [end]="date"></countdown-timer>