How to use the angular countdown component

This article mainly introduces the relevant knowledge of "how to use the angular countdown component". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use the angular countdown component" can help you solve the problem.

Component countdown.html code

{{title}} {{hour}} hours {{minute}} minutes {{second}} seconds

Component countdown.scss code

.count-down {width:100%; height:100px; background: rgba; 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;}}

Component 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 {/ / parent component delivery due date @ Input () endDate: number; / / parent component delivery title @ Input () title: string; / / hourly difference private hour: number / / private minute: number; / / private second: number; / / time difference private _ diff: number; 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; / / every second update time difference ngAfterViewInit () {this.timer = setInterval (() = > {this.diff = this.endDate-Date.now ();}, 1000);} / / clear timer ngOnDestroy () {if (this.timer) {clearInterval (this.timer);} when destroying components

Use method demo.html

This is the end of the introduction to "how to use the angular countdown component". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.