Recipes

Useful together.

Small, practical combinations for the interfaces developers build every day.

Dashboard metrics

Readable numbers, explicit units.

Standalone component

import { Component } from '@angular/core';
import { CompactNumberPipe, FormatUnitPipe } from 'extra-pipe';

@Component({
 standalone:true,
 imports:[CompactNumberPipe, FormatUnitPipe],
 template: `{{12500 | compactNumber:'compact':1:'en'}}
{{12.5 | formatUnit:'kilometer':{unitDisplay:'long'}:'fr'}}`,
})
export class MetricsComponent {}

Visitors12.5K

Distance12,5 kilomètres

Profile & account

Show just enough information.

Standalone component

import { Component } from '@angular/core';
import { InitialsPipe, MaskPipe } from 'extra-pipe';

@Component({
 standalone:true,
 imports:[InitialsPipe, MaskPipe],
 template: `{{'Ana María' | initials:2}}
{{'4242424242424242' | mask:0:4}}`,
})
export class AccountComponent {}

Avatar labelAM

Account ending••••••••••••4242

Masking only changes displayed text. Never send secrets to the browser just because the label is masked.

Immutable collections

Keep the newest record. Then sort.

Standalone component

import { Component } from '@angular/core';
import { JsonPipe } from '@angular/common';
import { UniqueByPipe, OrderByPipe } from 'extra-pipe';

@Component({
 standalone:true,
 imports:[JsonPipe, UniqueByPipe, OrderByPipe],
 template: `{{records | uniqueBy:'id':'last' | orderBy:'name':'asc':'en' | json}}`,
})
export class RecordsComponent {
 readonly records=[{id:1,name:'old Ana'},{id:2,name:'Sam'},{id:1,name:'Ana'}];
}

[
  {
    "id": 1,
    "name": "Ana"
  },
  {
    "id": 2,
    "name": "Sam"
  }
]

Both pipes return new arrays and retain object identity. Precompute large collections outside the template.

Reporting

Total first. Format second.

Standalone component

import { Component } from '@angular/core';
import { SumByPipe, CompactNumberPipe } from 'extra-pipe';
@Component({standalone:true, imports:[SumByPipe, CompactNumberPipe], template: `{{sales | sumBy:'amount' | compactNumber:'compact':1:'en'}}`})
export class SalesComponent { readonly sales=[{amount:2500},{amount:10000}]; }

12.5K

Aggregate finite numeric fields, then localize their display. Precompute large reports outside templates.

Content

A reading estimate, not a timer.

Standalone component

import { Component } from '@angular/core';
import { WordCountPipe, ReadingTimePipe } from 'extra-pipe';
@Component({standalone:true, imports:[WordCountPipe, ReadingTimePipe], template: `{{article | wordCount:'en'}} words · {{article | readingTime:200:'en'}}`})
export class ArticleComponent { readonly article='Small pipes make thoughtful interfaces.'; }

5 words · 1 min

Uses an explicit words-per-minute rate and language segmentation; it does not measure an individual reader.