typescript 52 lines · 10 steps

A self-refreshing timeAgo pipe in Angular

An impure Angular pipe that renders relative timestamps and reschedules its own change detection so the label stays current.

Explained by highlit
Angular Advanced impure-pipe change-detection timers ngzone lifecycle
1import { Pipe, PipeTransform, ChangeDetectorRef, NgZone, OnDestroy } from '@angular/core';
2 
3@Pipe({
4 name: 'timeAgo',
5 standalone: true,
6 pure: false,
7})
8export class TimeAgoPipe implements PipeTransform, OnDestroy {
9 private timer: ReturnType<typeof setTimeout> | null = null;
10 
11 constructor(private cdr: ChangeDetectorRef, private ngZone: NgZone) {}
12 
13 transform(value: Date | string | number): string {
14 this.clearTimer();
15 const then = new Date(value).getTime();
16 const seconds = Math.round((Date.now() - then) / 1000);
17 
18 this.scheduleUpdate(seconds);
19 return this.format(seconds);
20 }
21 
22 private format(seconds: number): string {
23 if (seconds < 5) return 'just now';
24 if (seconds < 60) return `${seconds} seconds ago`;
25 const minutes = Math.round(seconds / 60);
26 if (minutes < 60) return `${minutes} minute${minutes === 1 ? '' : 's'} ago`;
27 const hours = Math.round(minutes / 60);
28 if (hours < 24) return `${hours} hour${hours === 1 ? '' : 's'} ago`;
29 const days = Math.round(hours / 24);
30 return `${days} day${days === 1 ? '' : 's'} ago`;
31 }
32 
33 private scheduleUpdate(seconds: number): void {
34 const delay = seconds < 60 ? 1000 : seconds < 3600 ? 30000 : 300000;
35 this.ngZone.runOutsideAngular(() => {
36 this.timer = setTimeout(() => {
37 this.ngZone.run(() => this.cdr.markForCheck());
38 }, delay);
39 });
40 }
41 
42 private clearTimer(): void {
43 if (this.timer) {
44 clearTimeout(this.timer);
45 this.timer = null;
46 }
47 }
48 
49 ngOnDestroy(): void {
50 this.clearTimer();
51 }
52}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1An impure pipe runs on every change detection cycle, so it can manage live, time-dependent output.
  2. 2Scheduling timers outside Angular's zone avoids triggering needless change detection until you explicitly re-enter it.
  3. 3Pipes that own resources like timers must clean them up in ngOnDestroy to prevent 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
go 
func (w *Watcher) resetDebounce(d time.Duration) {
	if !w.timer.Stop() {
		select {
		case <-w.timer.C:

Debouncing a stream of events in Go

debounce timers channels
Advanced 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

Share this explainer

Here's the card — post it anywhere.

A self-refreshing timeAgo pipe in Angular — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code