项目作者: matheushf

项目描述 :
Simple and Customizable Angular 8 Date Countdown
高级语言: TypeScript
项目地址: git://github.com/matheushf/ng2-date-countdown.git
创建时间: 2017-06-18T07:10:57Z
项目社区:https://github.com/matheushf/ng2-date-countdown

开源协议:

下载



Europe




Make customizables Date Countdowns with this simple and easy angular 8 component.

(--prod compatible)




Europe



Europe



Europe


Fork https://github.com/matheushf/ng2-date-countdown


Instalation

npm install ng2-date-countdown --save

In your app.module, add CountdownModule to your imports:

  1. import { CountdownModule } from "ng2-date-countdown";
  2. @NgModule({
  3. declarations: [
  4. AppComponent
  5. ],
  6. imports: [
  7. BrowserModule,
  8. CountdownModule
  9. ],
  10. bootstrap: [AppComponent]
  11. })

Usage

(reached)="someFunction($event)" You can use a Callback function for when it reaches 0"

[text]: Change the text displayed in the date

[units]: Choose which units do you want to display

[divider]: Choose what you want to divide the dates with

[showZeros]: Choose if you want to show a zero before the number '01 Days'

In your html template:

  1. <countdown units="Year | Month | Days | Hours | Minutes | Seconds" end="July 22, 2019"></countdown>

To set a custom Language and divider, set this variable in your component.ts file:

  1. text:any = {
  2. Year: 'Year',
  3. Month: 'Month',
  4. Weeks: "Weeks",
  5. Days: "Days",
  6. Hours: "Hours",
  7. Minutes: "Minutes",
  8. Seconds: "Seconds",
  9. MilliSeconds: "MilliSeconds"
  10. };

In your .html:

  1. <countdown (reached)="callback($event)" [text]="text" units="Year | Month | Days | Hours | Minutes | Seconds" end="July 22, 2019"></countdown>

To customize the Countdown (.scss), use the class from it (you can inspect from chrome elements) and put the ‘/deep/‘ before them, example:

  1. /deep/ .countdown {
  2. width: 100%;
  3. height: 100px;
  4. background: black;
  5. .measurements {
  6. color: white;
  7. margin-right: 5px;
  8. padding: 10px;
  9. }
  10. .divider {
  11. font-size: 30px;
  12. }

(inspired on angular-simple-countdown)