Angular — Crear componente Countdown en unos sencillos pasos

Tutorial detallado para crear un componente tipo countdown para utilizar cuentas atrás en nuestros proyectos Angular

6 min readAug 4, 2021

En esta ocasión os voy a mostrar los pasos que debemos de dar para crear un componente en el que vamos a implementar una cuenta atrás.

¿Para qué una cuenta atrás? Podemos utilizarlo para juegos de tipo quiz, en el que hay un tiempo límite, para mostrar cuánto falta para un evento, aparte de otras funciones más.

Vamos a crear un proyecto de librería con el objetivo que sea válido para que podamos distribuirlo posteriormente.

0.- Requisitos mínimos

Tener conocimientos de Angular.
Saber trabajar con el CLI de Angular
Conocimientos desarrollando librerías de Angular.

Si se da el caso que tenéis los dos primeros requisitos y no el último, os animo a que veáis este video, donde enseño como crear una librería en Angular. El video es el siguiente:

1.- Preparativos para empezar el desarrollo

O voy a resumir los pasos dados para crear la librería para que tengáis la referencia seguida por mi.

En este caso lo haré con la versión 12 de Angular, pero es válida para cualquiera anterior.

1.1.- Crear proyecto

Ejecutamos el comando para crear un nuevo proyecto sin rutas y con estilos CSS

ng new ctimer --routing=false --style=css

1.2.- Crear librería

Ejecutamos el comando para crear un nuevo proyecto sin rutas y con estilos CSS

ng g library countdown-timer -p=ctimer

Si todo ha ido bien, tenemos que tener el proyecto con esta información en los ficheros clave del proyecto.

angular.json

Proyecto de aplicación y referencia de la librería

tsconfig.json

En este caso se ha añadido una propiedad “paths” haciendo referencia a la librería “countdown-timer” cuando la compilamos. Así, podremos hacer referencia mediante rutas absolutas y no relativas.

projects/countdown-timer Estructura de la librería

2.- Añadir la funcionalidad para ir descontando el tiempo

Ahora que ya tenemos todos ls ficheros creados para el desarrollo del objetivo, vamos a projects/countdown-timer/src/lib/countdown-timer.component.ts

Y añadimos el siguiente código:

Os lo explico por partes para que lo entendamos mejor, he añadido comentarios para tener una referencia + clara.

En el decorador del componente, añadimos el selector, el contenido del html, que es super simple y los estilos, por ahora lo dejamos así sin tocar nada.
Dentro de la clase, en las propiedades añadimos “time” donde se irá almacenando la diferencia actual, entre el momento de ahora y el momento objetivo(finishDate). Aparte de esto, tenemos una entrada (finishDateString), donde tramos la fecha y hora para asignarlo como fecha objetivo en el finishDate.
start(): Donde ejecutamos un intervalo de 1000 milisegundos = 1 segundo para ir haciendo la actualización, mientras esté en marcha y haya diferencia entre el momento actual y el futuro.
updateTime(): Donde hacemos los cálculos teniendo como referencia el momento actual y el futuro (objetivo) haciendo las operaciones para obtener días, horas, minutos y segundos.
ngOnInit(): Inicializamos los valores, suscribimos el componente a “start()” para ir ejecutando las acciones de actualización cada un segundo de intervalo.

Para utilizar esta librería, debemos de importar el módulo donde queremos hacerlo. Lo haremos en app.module.ts y luego teniendo en cuenta el selecto del componente lo añadimos en app.component.html. Quedará así:

Y en el app.component.html

<ctimer-countdown-timer[finishDateString]="'2021-08-05 18:18:18'"></ctimer-countdown-timer>

Y el resultado con la aplicación inicializada

Cuando esté en marcha el proyecto y se haga la actualización del tiempo de diferencia entre ahora y el objetivo

¡Bien! La funcionalidad ya está. en marcha, lo que tenemos que hacer ahora es reflejarla en el navegador, en la UI, ya que ahora estamos viendo los resultados en la consola y eso no es útil para los usuarios de nuestra página

3.- Pintar el resultado en el layout

Ahora que ya disponemos en todo momento el estado del descontador, actualizado segundo a segundo, lo que tenemos que hacer es dibujarlo para que los usuarios de nuestra página puedan tener esa información a la vista.

Cambiamos dentro de del componente en el apartado del template, añadiendo al final el este código, para mostrar la información del tiempo que falta hasta llegar al punto final / objetivo.

@Component({selector: 'ctimer-countdown-timer',template: `<div id="timer"><div>{{ time.days }} <span>Días</span></div><div>{{ time.hours }} <span>Horas</span></div><div>{{ time.minutes }} <span>Minutos</span></div><div>{{ time.seconds }} <span>Segundos</span></div></div>`,styles: [``],})

Si refrescamos el proyecto, teniendo como referencia que la fecha final que introducimos es [finishDateString]=”’2021–08–05 18:18:18'” y en este momento escribiendo el artículo es el 2021–08–04 19:40:15, el resultado aproximado es el siguiente

El descontador en marcha, aunque con una apariencia bastante pobre pero lo que importa ahora es que funcione

4.- Mejorando la apariencia del descontador

Ahora que ya hemos conseguido que el funcionamiento sea el correcto para darle un aspecto más profesional, vamos a añadir el siguiente código CSS dentro de “styles” en el propio componente con el que estamos trabajando, debajo de “templates”.

Si guardamos, visualizamos los cambios quedará algo como lo siguiente:

5.- Especificando el final

Ahora que ya hemos implementado la funcionalidad principal, hay que añadirle mejoras como mostrar un mensaje de que hemos llegado al objetivo futuro asignado en la fecha.

¿Cuando se dará esta situación?

Se dará cuando todos los valores lleguen a 0, por lo que tendremos que añadir un condicional, que en el caso de cumplir, paremos el reloj desuscribiéndonos del observable que tenemos en marcha para que no siga restando.

Vamos a ver poniendo una fecha muy próxima, para ver que pasa cuando llega a 0 y no paramos el descontador, se volverá en un valor negativo

Si llega al objetivo y no paramos el reloj, ocurre lo siguiente, que los valores ya no son acordes a lo que debería de dar

Si pasa el objetivo y no paramos el reloj…¡Un desastre!

Para solucionar esto, debemos de parar la ejecución del descontador que lo hemos implementado con el Observable.

Cambiamos en el apartado donde suscribimos el observable, a lo siguiente:

Este código lo que hace es que cuando ya haya llegado al objetivo, pare el reloj y deje todo en 0.

Cuando el reloj ha llegado a su objetivo

Evidentemente, esto es mejorable y otros aspectos del proyecto, pero en este caso se va a quedar en este punto.

6.- Conclusión

Llegados a este punto finalizamos con este artículo en el que hemos aprendido la manera de crear un interesante descontador para mostrar algo visual de cara a eventos futuros u otras actividades. Os animo a que lo implementéis y le metáis algunas funcionalidades, porque es mejorable, dedicando un poco de tiempo y paciencia, se pueden conseguir cosas chulas.

7- Invítame a un café

Si este contenido o cualquier artículo de los que puedes encontrar aquí te resulta útil, si queréis ir obteniendo artículos de calidad, me gustaría vuestro apoyo ya que sin ese apoyo no podré dedicarle el tiempo necesario a crear este contenido de calidad.

Podéis apoyarme desde aquí:

buymeacoffee.com/mugan86

8- Presencia en redes sociales.

Podéis encontrarme en las siguientes redes.

9.- Cursos Online

Los cursos que imparto (PREMIUM y gratuitos) los podéis encontrar siempre al mejor precio en mi web personal.

Anartz Mugika Ledo.