Mik az Angular-ban a pipes?

Question

Accepted Answer

**Pipes** az adatokat **megjelenítésre** közvetlenül a templates-ben alakítják át a `|` operátor segítségével. Lehetővé teszik az értékek (dátumok, pénznem, szöveg) formázását az alapul szolgáló adatok megváltoztatása vagy transformációs logika írása nélkül a komponensben. ## Beépített pipes használata ```html

``` A bal oldali érték átkerül a pipe-on keresztül; az argumentumok a kettőspont után következnek (`date:'longDate'`). ## Pipes összekapcsolása ```html

``` ## Az async pipe — kiemelkedő fontossággal bír ```html

``` Az `async` különösen fontos: feliratkozik egy Observable-re (pl. egy HTTP-eredmény), megjeleníti az emittált értéket, és **automatikusan leiratkozik** amikor a komponens megsemmisül — memóriaszivárgást megelőzve kézi feliratkozás-kezelés nélkül. ## Egyéni pipe létrehozása ```ts 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 vs impure pipes ```text 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) ``` A pure pipes gyorsítótárazva vannak és csak akkor számítódnak újra, amikor a bemenetük változik — így hatékonyabbak. ## Miért fontos ez A pipes az adatok formázását deklaratívnak tartják és a template-ben helyezik el, ahol szükséges, a komponens logikájától elkülönítve — újrahasznosítható, összekapcsolható, és (ha pure) hatékony. A beépített pipes az általános formázást fedik le, az egyéni pipes az alkalmazásspecifikus transzformációkat kezelik, és az `async` pipe az Observable-adatok megjelenítésének idiomatikus, memóriaszivárgás-mentes módja — egy minta, amelyet folyamatosan használni fog az Angular-ban.