Pipes transformam dados para exibição diretamente nos templates, usando o operador |. Eles permitem que você formate valores (datas, moeda, texto) sem alterar os dados subjacentes ou escrever lógica de transformação no componente.
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
O valor à esquerda é passado pelo pipe; argumentos seguem um dois-pontos (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 é especialmente importante: ele se inscreve em um Observable (por exemplo, um resultado HTTP), renderiza o valor emitido e se desinscreve automaticamente quando o componente é destruído — prevenindo vazamentos de memória sem gerenciamento manual de inscrição.
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)
Pipes puros são armazenados em cache e apenas recalculam quando suas entradas mudam — tornando-os eficientes.
Pipes mantêm a formatação de dados declarativa e no template onde pertence, separada da lógica do componente — reutilizável, encadeável e (quando puro) eficiente.
Os pipes incorporados cobrem formatação comum, pipes personalizados lidam com transformações específicas do aplicativo, e o pipe async é a maneira idiomática e livre de vazamentos de exibir dados Observable — um padrão que você usará constantemente no Angular.