typescript 47 lines · 8 steps

Building a cached money pipe in Angular

A standalone Angular pipe that formats currency with Intl.NumberFormat and memoizes formatters by locale and options.

Explained by highlit
Angular Intermediate pipes memoization internationalization dependency-injection
1import { Pipe, PipeTransform, Inject, LOCALE_ID } from '@angular/core';
2 
3interface MoneyOptions {
4 currency?: string;
5 display?: 'symbol' | 'code' | 'name';
6 minimumFractionDigits?: number;
7}
8 
9@Pipe({
10 name: 'money',
11 standalone: true,
12})
13export class MoneyPipe implements PipeTransform {
14 private readonly formatters = new Map<string, Intl.NumberFormat>();
15 
16 constructor(@Inject(LOCALE_ID) private readonly locale: string) {}
17 
18 transform(
19 value: number | string | null | undefined,
20 options: MoneyOptions = {},
21 ): string {
22 if (value == null || value === '') {
23 return '';
24 }
25 
26 const amount = typeof value === 'string' ? Number(value) : value;
27 if (Number.isNaN(amount)) {
28 return '';
29 }
30 
31 const { currency = 'USD', display = 'symbol', minimumFractionDigits } = options;
32 const cacheKey = `${this.locale}|${currency}|${display}|${minimumFractionDigits ?? ''}`;
33 
34 let formatter = this.formatters.get(cacheKey);
35 if (!formatter) {
36 formatter = new Intl.NumberFormat(this.locale, {
37 style: 'currency',
38 currency,
39 currencyDisplay: display,
40 minimumFractionDigits,
41 });
42 this.formatters.set(cacheKey, formatter);
43 }
44 
45 return formatter.format(amount);
46 }
47}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Caching expensive-to-construct objects like Intl.NumberFormat by a composite key avoids rebuilding them on every change-detection pass.
  2. 2Guarding against null, empty, and NaN inputs keeps a pipe safe to bind directly to raw template data.
  3. 3Injecting LOCALE_ID lets formatting follow the app's configured locale instead of a hardcoded default.

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
java 
@Component
@Converter
public class EncryptedStringConverter implements AttributeConverter<String, String> {
 

Transparent column encryption in Spring & JPA

encryption aes-gcm jpa-converter
Advanced 10 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
java 
package com.acme.billing.config;
 
import org.springframework.boot.autoconfigure.condition.ConditionalOnProperty;
import org.springframework.boot.context.properties.ConfigurationProperties;

Feature-flagged beans with Spring @ConditionalOnProperty

feature-flags conditional-beans strategy-pattern
Intermediate 5 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

Share this explainer

Here's the card — post it anywhere.

Building a cached money pipe in Angular — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code