O que são pipes

Vamos começar com um texto extraído do próprio site do Angular:

Cada aplicativo começa com o que parece ser uma tarefa simples: obter dados, transformá-los e mostrá-los. Obter dados pode ser tão simples quanto criar uma variável local ou tão complexo quanto transmitir dados por meio de um WebSocket. Quando os dados chegam, você pode enviar seus valores brutos diretamente para a visualização, mas isso raramente contribui para uma boa experiência do usuário

Para exibir corretamente os dados o Angular desenvolveu o que chamamos de pipe, os quais permitem transformar uma dados antes de ser exibido diretamente ao usuário. Vamos ao nosso exemplo.

Como usar um pipe

Para utilizar um pipe você pode fazer o uso de uma | ao lado direito da própriedade e adicionar o pipe que deverá tratar o valor.

{{propriedade | pipe}}

Ao querer exibir corretamente uma data, por exemplo, podemos fazer o uso de um pipe que o próprio Angular nos fornece date. Para entender melhor, mostraremos um exemplo foi utilizado na área administrativa do https://anuncieon.com, lá temos a seguinte situação na listagem de anúncios.

<span>{{anuncio.visualizacoes}} visitas - {{anuncio.dataHoraCadastro}}</span>

No atributo data cadastro, temos uma data, que mostrada de forma bruta veremos o seguinte.

21 visitas - 2018-03-02T12:51:57

A data é exibida mas em um formato incorreto. Que tal se pudessemos melhorar esta apresentação? Usando o pipe de datas do próprio Angular, podemos deixar nosso código assim:

<span>{{anuncio.visualizacoes}} visitas - {{anuncio.dataHoraCadastro |  date:'dd/MM/yyyy HH:mm'}}</span>

Isso é o que de fato precisamos para exibir a data da seguinte forma:

21 visitas - 02/03/2018 09:51

Ficando com certeza muito mais apresentável.

Quais pipes o Angular disponibiliza?

Existem uma série de pipe disponíveis para uso, disponibilizados pelo próprio Angular. Você pode acessar a lista completa acessando este link: https://angular.io/api?type=pipe.

Clicando sobre cada `pipe``você pode ver como utilizar.

Mas caso queira criar seu próprio pipe, vou mostrar como fazer na próxima postagem.

Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.