Angular2 countdown component usage details, angular2 Usage Details

Angular2 countdown component usage details, angular2 Usage Details

The project encounters a countdown requirement. Considering that it will be used in other modules in the future, it encapsulates a component by itself. It is easy to reuse later.

The component requirements are as follows:
-Receiving the delivery deadline of the parent component
-Receive parent-level component delivery title

Component Effect

Variable

Countdown.html code

<Div class = "count-down"> <div class = "title"> 

Countdown. scss code
.count-down{  width:100%;  height:100px;  background: rgba(0,0,0,0.5);  padding: 2px 0;  .body{    margin-top: 8px;    .content{      width:29%;      float: left;      margin: 0 2%;      .top{        font-size: 20px;;        line-height: 30px;        color: black;        background: white;        border-bottom: 2px solid black;      }      .bottom{        font-size: 14px;        line-height: 20px;        background: grey;      }    }  }}
Countdown. component. ts code

Import {Component, OnInit, Input, OnDestroy, AfterViewInit} from '@ angular/core'; @ Component ({selector: 'roy-countdown', templateUrl :'. /countdown.component.html ', styleUrls :['. /countdown. component. scss ']}) export class CountdownComponent implements AfterViewInit, OnDestroy {// The parent component transmits the end date @ Input () endDate: number; // The parent component transmits the title @ Input () title: string; // private hour: number; // private minute: number in minutes; // private second: number in seconds; // private _ diff: number in Time Difference; private get diff () {return this. _ diff;} private set diff (val) {this. _ diff = Math. floor (val/1000); this. hour = Math. floor (this. _ diff/3600); this. minute = Math. floor (this. _ diff % 3600)/60); this. second = (this. _ diff % 3600) % 60;} // timer private timer; // Update Time Difference of each second ngAfterViewInit () {this. timer = setInterval () => {this. diff = this. endDate-Date. now () ;}, 1000) ;}// clear the timer ngOnDestroy () {if (this. timer) {clearInterval (this. timer );}}}
Use includemo.html
<Roy-countdown title = "beyond the exam:" [endDate] = "endDate"> </roy-countdown>
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.