Angular Pipes

Motivation

Birthday: {{ user().dateOfBirth }}
Weight[kg]: {{ user().weight }}
Weight[lbs]: {{ user().weight * 2.2046226218 }}

Birthday: Mon Jul 23 2003 00:00:00 GMT+0200
Weight[kg]: 80
Weight[lbs]: 176.369809744

💡 f'{something}' | String.format()

Pipes

{{ value | pipe }} => pipe(value)

• performanter als Funktionen

• gecached

Stringmanipulation

text = signal('Pipes')

{{ text | uppercase }} => PIPES

{{ text | lowercase }} => pipes

{{ value | slice:from:to }} => value[from:to]

{{ text | slice:1:3 }} => ip

date

{{ value | date:format:timezone:locale }}

{{ now() }}     Mon Sep 01 2025 13:17:57 GMT+0200
{{ now() | date }}  Sep 1, 2025
{{ now() | date:'dd.MM.yyy HH:mm:ss' }}  01.09.2025 13:17:57
{{ now() | date:'yy/d/M' }}  25/1/9

import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';

registerLocaleData(localeDe);

{{ now() | date:'EEEE, dd. MMMM':undefined: 'de' }}  
    Montag, 01. September

number

{{ value | number:digitsInfo:locale }}
digitsInfo: 'minIntegerDigits.minFractionDigits-maxFractionDigits'

{{ pi() }}  3.1415926
{{ pi() | number }}  3.142
{{ pi() | number:'1.2-2' }}  3.14
{{ pi() | number:'1.0-2' }}  3.14
{{ pi() | number:'2.2-2':'en' }}  03.14
{{ pi() | number:'2.2-2':'de' }}  03,14

currency

{{ value | currency:currencyCode:display:digitsInfo:locale }}

{{ sum() }} 42.7
{{ sum() | currency }} $42.70
{{ sum() | currency:'EUR' }} €42.70
{{ sum() | currency:'EUR':'symbol':'1.2-2':'de-at' }} 42,70 €

json

{{ value | json }}

{{ person() }}  [object Object]
{{ person() | json }}  {'name': 'Dani', 'age': 16}

Debugging 👍

Custom Pipes

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
    name: 'kebabCase',
})
export class KebabCasePipe implements PipeTransform {
    transform(value: string, separator = '-'): string {
        return value.toLowerCase().replace(/ /g, separator);
    }
}

{{ lorem() | kebabCase }}  lorem-ipsum-dolor-sit-amet
{{ lorem() | kebabCase:'_' }}  lorem_ipsum_dolor_sit_amet