Estoy tratando de hacer mi primer componente en angular, he checho esto en el archivo .ts, pero no se como se hace para que el countdown aparezca en el template, me imagino que debo llamar la función que lo ejecuta en en dicho template pero no se como hacerlo....................................... ....................................................................
Gracias por su ayuda
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-countdown',
templateUrl: './countdown.component.html',
styleUrls: ['./countdown.component.css']
})
export class CountdownComponent implements OnInit {
countDownDate: number;
now: number;
days: number;
hours: number;
minutes: number;
seconds: number;
distance: number;
constructor(countDownDate_:number) {
this.countDownDate = countDownDate_;
}
mi_funcion () {
let _self = this;
let x = setInterval(function():void{
_self.now = new Date().getTime();
let distance: number = _self.countDownDate - _self.now
let days:number = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours:number = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes:number = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds:number = Math.floor((distance % (1000 * 60)) / 1000);
console.log( `Faltan: ${days} Dias, ${hours} Horas, ${minutes} Minutos, ${seconds} Segundos`);
if (distance < 0){
clearInterval(x);
console.log("El tiempo para preventa he terminado");
}
},1000);
}
ngOnInit() {
}
}
let countDownDate_:number = new Date ("Jan 5, 2021 15:37:25").getTime();
let instancia = new MyCountDown(countDownDate_);
instancia.mi_funcion()
//Html
<div class="row">
<div class="col-3">Dias: </div>
<div class="col-3">Horas: </div>
<div class="col-3">Minutos</div>
<div class="col-3">Segundos</div>
</div>