Why use Signals instead of Observables for a countdown?

Signals Angular 21 have less overhead than RxJS: no subscription lifecycle, automatic change detection, zero memory leak. For high-frequency counters (1s tick or sub-second), Signals eliminate boilerplate of takeUntil/unsubscribe and integrate natively with OnPush.

Set Interval vs Request Animation Frame for Timer?

SetInterval is deterministic for counter "human-readable" (HH:MM:SS) and saves CPU when tab is in background (browser clamp at 1s). requestAnimationFrame is 60fps sync with refresh rate: use only if animating UI between ticks. This countdown uses setInterval(1s) because it shows whole seconds.

How to handle temporary drift during long countdowns?

Set interval accumulates drift (event loop not precise to 1ms). Solution: always compare target.getTime() - Date.now() instead of decrementing local counter. Formula: diff = target - now; days = floor(diff/86400000). Drift remains zero even after hours of execution.

SSR-safe: Avoiding ReferenceError: window is not defined?

Be concise - keep similar length. Use isPlatformBrowser(platformId) before calling setInterval, setTimeout, or window.* The countdown runs start() only in the browser; during Server-Side Rendering (SSR), it renders the initial state without a timer. Standard pattern for Angular Universal.

How do I get 60fps performance with OnPush?

Signal.set() notifies automatic change detection even with OnPush. No zone.js patch required for rAF. If the counter needs to update visually at 60fps (e.g., milliseconds), use requestAnimationFrame + signal:rAF → computeCountdown(target) → signal.set(result).

How to test a countdown with Jasmine/Jest?

Use jasmine.clock().install() + tick(1000) to simulate time progress. Mock Date.now() with spyOn(Date, "now").and.returnValue(fixedMs). Pattern: component.start(); tick(1000); expect(component.countdown()).toEqual(

Countdown Timer | Federico Calò

Set up your event

Choose your event date and time or use the quick presets.

Quick presets:

Event name (optional)

Target date and time

Come utilizzare Countdown Timer

Scegli o inserisci una data target

Seleziona una data e un orario tramite il campo datetime oppure usa uno dei preset rapidi (Capodanno, Natale) per impostare automaticamente la prossima ricorrenza.

Aggiungi un nome all'evento (opzionale)

Puoi inserire un nome descrittivo per l'evento, come "Compleanno Marco" o "Vacanze estive". Il nome appare nell'intestazione del countdown per personalizzarlo.

Avvia il countdown

Premi "Avvia Countdown" per iniziare il conto alla rovescia. Il timer si aggiornerà ogni secondo mostrando giorni, ore, minuti e secondi rimanenti.

Osserva il countdown in diretta

I quattro riquadri mostrano rispettivamente i giorni, le ore, i minuti e i secondi rimanenti. Quando il tempo scade appare un messaggio di evento trascorso.

Suggerimenti

Usa i preset rapidi per impostare subito Capodanno o Natale senza digitare manualmente la data.
Il countdown usa l'orario locale del tuo browser, quindi è preciso per il tuo fuso orario.
Lascia aperta la scheda in background: il timer continua ad aggiornarsi anche se la finestra non è in primo piano.

Domande frequenti

How many simultaneous countdowns can I create?

This version supports one countdown at a time. To manage multiple countdowns, open each browser tab with a different date.

Does the countdown reset when I reload the page?

Yes, currently the countdown is not saved between sessions. If you want to keep it, keep the browser tab open without reloading it.

What happens when the event has passed?

Event has passed - you can set a new date to start again.

What year do Christmas and New Year's use?

Preset calculations always consider the next occurrence: if the date has already passed in the current year, the edition of the next year is automatically set.

Timer Countdown