Ng6 Countdown

A simple countdown for angular 6 based in materialize-css.

Pre-requisites

• Materilize-css
• Moment

Quickstart:

You can install run the next command.

• npm install ng6-countdown

in app.module file.

import { BrowserModule } from  '@angular/platform-browser';
import { NgModule } from  '@angular/core';
 
import { CountDownModule } from  'ng6-countdown';
 
import { AppComponent } from  './app.component';
 
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
CountDownModule
....
],
providers: [],
bootstrap: [AppComponent]
})
export  class  AppModule { }

in html file.

<lib-countdown  date="October 18, 2019 00:33"></lib-countdown>

the result is:

• Custom card colors and bind finish date from controller. html file

<!-- Set card background color to white and set card text color to black -->
<lib-countdown
[date]="finishDate"
cardBackgroundColor="white"
cardTextColor="black">
</lib-countdown>

controller file

import { Component } from  '@angular/core';
@Component({
selector:  'app-root',
templateUrl:  './app.component.html',
styleUrls: ['./app.component.css']
})
export  class  AppComponent {
finishDate  =  'October 18, 2019 00:33';
}

the result is:

• Custom template. html file

<!-- Show time remainig with custom template -->
 
<lib-countdown
[date]="finishDate"
isCustomTemplate="isCustomTemplate"
(daysChanged)="onDaysChanged($event)"
(hoursChanged)="onHoursChanged($event)"
(minutesChanged)="onMinutesChanged($event)"
(secondsChanged)="onSecondsChanged($event)">
<div  class="row">
  <div  class="col s12">
    <div  class="card">
      <div  class="card-image waves-effect waves-block waves-light">
        <p  class="number-style center-align">  <strong  class="text-bold">Days Remaining: </strong> {{days}} </p><br>
        <p  class="number-style center-align">  <strong  class="text-bold">Hours Remaining: </strong> {{hours}} </p><br>
        <p  class="number-style center-align">  <strong  class="text-bold">Minutes Remaining: </strong> {{minutes}} </p><br>
        <p  class="number-style center-align">  <strong  class="text-bold">Seconds Remaining: </strong> {{seconds}} </p><br>
      </div>
      <div  class="card-content"  [style.background]="backgroundColor">
        <span  class="card-title activator white-text text-darken-4 center-align"  [style.color]="textColor">I'm a custom card</span>
      </div>
    </div>
  </div>
</div>
</lib-countdown>

in controller file.

import { Component } from  '@angular/core';
 
@Component({
selector:  'app-root',
templateUrl:  './app.component.html',
styleUrls: ['./app.component.css']
})
export  class  AppComponent {
  title = 'app';
  finishDate = 'October 18, 2019 00:33';
  isCustomTemplate = true;
  days;
  hours;
  minutes;
  seconds;
  backgroundColor = 'red';
  textColor = 'black';
 
onDaysChanged(days) {
this.days  =  days;
}
 
onHoursChanged(hours) {
this.hours  =  hours;
}
 
onMinutesChanged(minutes) {
this.minutes  =  minutes;
}
 
onSecondsChanged(seconds) {
this.seconds  =  seconds;
}
}

the result is:

Documentation

Inputs

NAME	TYPE	DESCRIPTION	DEFAULT VALUE
date	string	represents the finish date.	none
title	string	represents the title in html file	The time remaining is:
daysText	string	represents days title in html file	Days
hoursText	string	represents hours title in html file	Hours
minutesText	string	represents minutes title in html file	Minutes
secondsText	string	represents seconds title in html file	Seconds
isCustomTemplate	boolean	flag to indicate if use a custom template	false
cardBackgroundColor	string	represents background color of card	seagreen
cardTextColor	string	represents text color of card	white

Outpouts

NAME	TYPE	DESCRIPTION	EMIT VALUE
daysChanged	EventEmitter	fired an event when days value changed.	number
hoursChanged	EventEmitter	fired an event when hours value changed.	number
minutesChanged	EventEmitter	fired an event when minutes value changed.	number
secondsChanged	EventEmitter	fired an event when seconds value changed.	number

Supported Browsers:

• Google Chrome
• Firefox
• Edge
• Internte Explorer ( You should enable polyfills to enable IE browsers)