Frequentemente, é necessário exibir dados de forma clara e visualmente atraente. Isso pode incluir a formatação de nomes, datas, preços, percentuais ou itens de listas.

Se todas essas transformações forem realizadas manualmente na lógica do componente, nossos templates podem rapidamente se tornar desorganizados e difíceis de manter. Para resolver esse problema, o Angular oferece um recurso simples e eficiente chamado pipes — uma maneira de transformar dados diretamente no template.

O que são Pipes?

Pense em um pipe como uma ferramenta que recebe dados brutos, processa-os e gera uma versão modificada — semelhante a um filtro em um fluxo de dados.

Utilizando Pipes no Angular

Sempre que for necessário formatar dados diretamente no template, é possível aplicar um pipe utilizando o símbolo | (pipe):

{{ value | pipeName }}

É possível também encadear vários pipes:

{{ value | pipe1 | pipe2 }}

Alguns pipes também aceitam parâmetros, que você passa usando dois-pontos (:):

{{ value | pipeName:param1:param2 }}

O Angular possui um conjunto de pipes integrados para lidar com necessidades comuns de formatação — desde números e datas até moeda e transformações de caixa. Veja exemplos práticos, começando pelo básico e avançando para casos de uso mais avançados.

Transformação de String

Considere uma propriedade username em seu componente. Frequentemente, é útil destacar ou enfatizar o nome de um usuário exibindo-o em letras maiúsculas.

Neste caso, a propriedade userName é obtida do componente e transformada para letras maiúsculas utilizando o pipe uppercase integrado do Angular. Portanto, se userName = 'alex', a saída na página será: ALEX.

Formatação de Datas

Além de strings, um dos tipos de dados mais comuns que você precisará formatar é a data.

Imagine que você tem um objeto user. Você deseja exibir a data em que ele se cadastrou em um formato limpo e legível:

Se user.dateJoined = new Date(2023, 3, 15), o resultado seria: Joined on: April 15, 2023.

O pipe date suporta uma ampla variedade de formatos, como short, medium, fullDate ou até mesmo formatos personalizados como dd/MM/yyyy.

Exibição de Moeda

Você está trabalhando com um objeto product. Para exibir o preço em uma moeda específica, utilize o pipe currency:

Se product.price = 199.99, a saída será: Price: $199.99.

É possível personalizar o pipe de moeda com configurações de localidade, estilo de exibição e se o símbolo da moeda será exibido ou não.

Existem muitos outros pipes úteis disponíveis no Angular. Embora nem todos sejam abordados aqui, abaixo está uma lista de referência rápida de pipes ainda não mencionados:

Para saber mais sobre cada pipe, acesse a documentação oficial do Angular.