typescript 47 lines · 8 steps

How Angular ICU plurals localize an order summary

A standalone Angular component uses i18n ICU plural expressions and getters to render grammatically correct, localizable order text.

Explained by highlit
Angular Intermediate i18n pluralization standalone-component computed-getters template-binding
1import { Component, Input } from '@angular/core';
2 
3interface Order {
4 id: string;
5 itemCount: number;
6 total: number;
7}
8 
9@Component({
10 selector: 'app-order-summary',
11 standalone: true,
12 template: `
13 <section class="order-summary">
14 <h2 i18n="@@orderSummaryHeading">Your orders</h2>
15 
16 <p i18n="@@orderCount">
17 You have {{ orders.length }}
18 {orders.length, plural,
19 =0 {no orders yet}
20 =1 {one order}
21 other {{{ orders.length }} orders}
22 }.
23 </p>
24 
25 <p *ngIf="orders.length" i18n="@@itemTotals">
26 {{ totalItems }}
27 {totalItems, plural,
28 =1 {item}
29 other {items}
30 }
31 across all orders, worth {{ grandTotal | currency:currencyCode }}.
32 </p>
33 </section>
34 `,
35})
36export class OrderSummaryComponent {
37 @Input() orders: Order[] = [];
38 @Input() currencyCode = 'USD';
39 
40 get totalItems(): number {
41 return this.orders.reduce((sum, o) => sum + o.itemCount, 0);
42 }
43 
44 get grandTotal(): number {
45 return this.orders.reduce((sum, o) => sum + o.total, 0);
46 }
47}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1ICU plural expressions let one template branch on count so translators can supply grammatically correct wording per language.
  2. 2Stable i18n IDs like @@orderCount give translation tools a reliable key that survives copy changes.
  3. 3Derived display values belong in getters, keeping the template declarative while inputs drive the data.

Related explainers

typescript 
import { NestFactory } from '@nestjs/core';
import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';
import { ValidationPipe } from '@nestjs/common';
import { ApiProperty } from '@nestjs/swagger';

Wiring validation and Swagger docs in NestJS

validation openapi decorators
Intermediate 8 steps
typescript 
import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
import { Observable, catchError, concatMap, finalize } from 'rxjs';
import { DataSource, QueryRunner } from 'typeorm';
 

Wrapping requests in a transaction with NestJS

interceptors transactions rxjs
Advanced 7 steps
typescript 
type CsvColumn<T> = {
  header: string;
  value: (row: T) => string | number | boolean | null | undefined;
};

Building a type-safe CSV writer in TypeScript

generics serialization escaping
Intermediate 7 steps
typescript 
import { parsePhoneNumberFromString, CountryCode } from 'libphonenumber-js';
 
export interface NormalizedPhone {
  e164: string;

Normalizing phone numbers to E.164 in TypeScript

validation normalization error-handling
Intermediate 7 steps
typescript 
import {
  CanActivate,
  ExecutionContext,
  Injectable,

Role-based access with a NestJS guard

authorization guards decorators
Intermediate 6 steps
typescript 
import { Injectable, computed, effect, signal } from '@angular/core';
 
export interface CartLine {
  id: string;

A signal-based cart store in Angular

signals reactivity computed-state
Intermediate 8 steps

Share this explainer

Here's the card — post it anywhere.

How Angular ICU plurals localize an order summary — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code