htlstp.if.scre

# Angular Pipes

---
#### Motivation
```angular181html
Birthday: {{ user().dateOfBirth }}
Weight[kg]: {{ user().weight }}
Weight[lbs]: {{ user().weight * 2.2046226218 }}
```

<div class="fragment">
<pre><code class="hljs html" data-trim data-noescape>
Birthday: Mon Jul 23 2003 00:00:00 GMT+0200
Weight[kg]: 80
Weight[lbs]: 176.369809744
</code></pre>
🤔
</div>

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

---
#### Pipes
```angular181html
{{ value | pipe }} => pipe(value)
```

* performanter als Funktionen

* gecached

---
#### Stringmanipulation
```typescript
text = signal('Pipes')
```

```angular181html
{{ text | uppercase }} => PIPES
```

```angular181html
{{ text | lowercase }} => pipes
```

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

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

---
#### `date`
```angular181html
{{ value | date:format:timezone:locale }}
```

```angular181html
{{ 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
```

<pre><code class="hljs typescript" data-trim data-noescape>
import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';

registerLocaleData(localeDe);
</code></pre>

<pre><code class="hljs angular181html" data-trim data-noescape>
{{ now() | date:'EEEE, dd. MMMM':undefined: 'de' }}  
    Montag, 01. September
</code></pre>

</div>

---
#### `number`

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

```angular181html
{{ 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`
```angular181html
{{ value | currency:currencyCode:display:digitsInfo:locale }}
```

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

---
#### `json`
```angular181html
{{ value | json }}
```

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

Debugging 👍

---
#### Custom Pipes
```typescript
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);
    }
}
```

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