Ng6 Countdown

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

Pre-requisites

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: default

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)">

Days Remaining: {{days}}

Hours Remaining: {{hours}}

Minutes Remaining: {{minutes}}

Seconds Remaining: {{seconds}}

I'm a custom card

in controller file.
```typescript
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)

denisparra123 / angular-6-countdown

readme