Cuenta regresiva con Angular – #minitutorial

Hace no mucho tiempo me pidieron poner una cuenta regresiva en una web con angular, así que imaginé que podría ayudar a más gente este pequeño código.

HTML

<section>
    <div class="coming-soon">
        <div class="time-countdown">
            <ul>
                <li class="count-bg-one radius"><span id="days">{{day}}</span>Dias</li>
                <li class="count-bg-two radius"><span id="hours">{{hours}}</span>Horas</li>
                <li class="count-bg-three radius"><span id="minutes">{{minutes}}</span>Minutos</li>
                <li class="count-bg-four radius"><span id="seconds">{{seconds}}</span>Segundos</li>
            </ul>
        </div>
    </div>
</section>

CSS

section {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

ul {
    display: flex;
    justify-content: center;
}

.coming-soon {
    width: 100%;
}

.time-countdown ul {
    margin: 36px auto;
}

.time-countdown ul li.count-bg-one {
    background: #468dbc;
}

.time-countdown ul li.count-bg-two {
    background: #ef9024;
}

.time-countdown ul li.count-bg-three {
    background: #ee337f;
}

.time-countdown ul li.count-bg-four {
    background: #1fb1f4;
    margin-right: 0;
}

.time-countdown ul li {
    width: 12%;
    margin-right: 4%;
    text-align: center;
    display: inline-block;
    padding: 24px 20px;
    color: #fff;
}

.radius {
    border-radius: 5px;
}

.time-countdown ul li span {
    color: #FFF;
    font-family: 'Poppins', sans-serif;
    font-size: 50px;
    line-height: 60px;
    font-weight: 700;
    display: block;
}

TS

import { Component, OnInit } from '@angular/core';
import { timer } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  _second = 1000;
  _minute = this._second * 60;
  _hour = this._minute * 60;
  _day = this._hour * 24;
  end: any;
  now: any;
  day: any;
  hours: any;
  minutes: any;
  seconds: any;
  source = timer(0, 1000);
  clock: any;
  constructor(){}
  ngOnInit(){
    
    this.clock = this.source.subscribe(t => {
      this.now = new Date();
      this.end = new Date('01/01/' + (this.now.getFullYear() + 1) +' 00:00');
      this.showDate();
    });
    
  }
  showDate(){
    let distance = this.end - this.now;
    this.day = Math.floor(distance / this._day);
    this.hours = Math.floor((distance % this._day) / this._hour);
    this.minutes = Math.floor((distance % this._hour) / this._minute);
    this.seconds = Math.floor((distance % this._minute) / this._second);
  }
}

Explicación de cuenta regresiva

No hay mucho que agregar podemos ver que en el ts agregamos la biblioteca de timer de rxjs, esto es para tener nuestro reloj con cuenta regresiva.

hacemos una pequeña conversión de tiempos, declarando los segundos en milisegundos y de ahí multiplicando hasta lograr los días.

_second = 1000;
_minute = this._second * 60;
_hour = this._minute * 60;
_day = this._hour * 24;

la parte más importante :

let distance = this.end – this.now;

con esto hacemos una resta de Dates para lograr saber cuantos dias hacen falta para cierto evento

y como ya es costumbre aca como se visualiza