typescript 44 lines · 8 steps

How a signal-driven countdown works in Angular

An Angular standalone component ticks down a signal every second and emits when it hits zero.

Explained by highlit
Angular Intermediate signals reactivity rxjs lifecycle auto-unsubscribe
1import { Component, computed, DestroyRef, inject, input, output, signal } from '@angular/core';
2import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
3import { interval, map, takeWhile } from 'rxjs';
4 
5@Component({
6 selector: 'app-countdown',
7 standalone: true,
8 template: `
9 <span class="countdown" [class.expiring]="remaining() <= 10">
10 {{ formatted() }}
11 </span>
12 `,
13})
14export class CountdownComponent {
15 readonly seconds = input.required<number>();
16 readonly expired = output<void>();
17 
18 private readonly destroyRef = inject(DestroyRef);
19 private readonly remaining = signal(0);
20 
21 protected readonly formatted = computed(() => {
22 const total = this.remaining();
23 const mins = Math.floor(total / 60);
24 const secs = total % 60;
25 return `${mins}:${secs.toString().padStart(2, '0')}`;
26 });
27 
28 ngOnInit(): void {
29 this.remaining.set(this.seconds());
30 
31 interval(1000)
32 .pipe(
33 map(() => this.remaining() - 1),
34 takeWhile((value) => value >= 0),
35 takeUntilDestroyed(this.destroyRef),
36 )
37 .subscribe((value) => {
38 this.remaining.set(value);
39 if (value === 0) {
40 this.expired.emit();
41 }
42 });
43 }
44}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Signals let a component's template react automatically to state changes without manual change detection.
  2. 2computed derives display values from source signals, recalculating only when its dependencies change.
  3. 3takeUntilDestroyed ties an RxJS subscription's lifetime to the component, preventing timer leaks.

Related explainers

typescript 
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection
Intermediate 8 steps
typescript 
import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';
 

Validating env config at boot in NestJS

configuration schema-validation environment-variables
Intermediate 8 steps
typescript 
import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup
Intermediate 8 steps
typescript 
import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence
Intermediate 7 steps
typescript 
import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation
Intermediate 8 steps
typescript 
import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';

Per-tenant database connections in NestJS

multi-tenancy connection-pooling dependency-injection
Advanced 8 steps

Share this explainer

Here's the card — post it anywhere.

How a signal-driven countdown works in Angular — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code