Pipes transformirajo podatke za prikaz neposredno v predlogah z operatorjem |. Omogočajo vam oblikovanje vrednosti (datume, valute, besedilo) brez spreminjanja osnovnih podatkov ali pisanja logike transformacije v komponenti.
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
Vrednost na levi strani se prosledi skozi pipe; argumenti sledijo dvopičju (date:'longDate').
<p>{{ today | date:'fullDate' | uppercase }}</p> <!-- pipes apply left to right -->
<!-- subscribes to an Observable/Promise and auto-unsubscribes -->
<div>{{ user$ | async }}</div>
<li *ngFor="let item of items$ | async">{{ item.name }}</li>
async je posebej pomemben: se naroči na Observable (npr. rezultat HTTP-ja), prikaže излучено vrednost in se samodejno odjavi, ko je komponenta uničena — preprečuje puščanje pomnilnika brez ročnega upravljanja naročnin.
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({ name: "truncate" })
export class TruncatePipe implements PipeTransform {
transform(value: string, limit = 20): string {
return value.length > limit ? value.slice(0, limit) + "…" : value;
}
}
// usage: {{ longText | truncate:50 }}
Pure (default): re-runs only when the input REFERENCE changes → efficient (cached)
Impure: re-runs on every change detection cycle → use sparingly (e.g. filtering)
Čisti pipes so predpomnjeni in se ponovno izračunajo le, ko se njihov vhod spremeni — zato so učinkoviti.
Pipes oblikovanje podatkov ohranijo deklarativno in v predlogi, kamor sodi, ločeno od logike komponente — ponovno uporabno, verižljivo in (ko je čisto) učinkovito.
Vgrajeni pipes pokrivajo skupno oblikovanje, prilagojeni pipes obdelajo transformacije po meri aplikacije, pipe async pa je idiomatičen, na puščanje odporen način za prikaz podatkov Observable — vzorec, ki ga v Angular-u nenehno uporabljate.