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 {
id: string;
itemCount: number;
total: number;
7}
8 
9@Component({
selector: 'app-order-summary',
standalone: true,
template: `
  <section class="order-summary">
    <h2 i18n="@@orderSummaryHeading">Your orders</h2>
15 
    <p i18n="@@orderCount">
      You have {{ orders.length }}
      {orders.length, plural,
        =0 {no orders yet}
        =1 {one order}
        other {{{ orders.length }} orders}
      }.
    </p>
24 
    <p *ngIf="orders.length" i18n="@@itemTotals">
      {{ totalItems }}
      {totalItems, plural,
        =1 {item}
        other {items}
      }
      across all orders, worth {{ grandTotal | currency:currencyCode }}.
    </p>
  </section>
`,
35})
36export class OrderSummaryComponent {
@Input() orders: Order[] = [];
@Input() currencyCode = 'USD';
39 
get totalItems(): number {
  return this.orders.reduce((sum, o) => sum + o.itemCount, 0);
}
43 
get grandTotal(): number {
  return this.orders.reduce((sum, o) => sum + o.total, 0);
}
47}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

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

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';