A simple countdown for angular 6 based in materialize-css.
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:
<!-- 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:
<!-- 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}}
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:
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 |
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 |