O que são pipes no Angular 6

Postado em por Wolmir Cezer Garbin em Angular | 926 Visualizações
Última atualização em:

Os pipes são um recurso muito utilizado no Angular para formatar a exibição de valores corretamente, entenda e veja como utilizar este recurso.

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.


Tem algo para vender? AnuncieOn.com

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.


Wolmir Cezer Garbin

Wolmir Cezer Garbin


Sou formado em Desenvolvimento de Sistemas para Internet pela faculdade Mater Dei e Pós graduado em Desenvolvimento de sistemas em Java pela UTFPR. Trabalho a mais de 9 anos com desenvolvimento em Java, Android e Web utilizando as principais tecnologias do mercado. Atuo como professor na faculdade Mater Dei, programador na Garbo Software e criador do Receitas de Código.

Ver mais

Code Conference

Esta é uma conferência de código realizada na cidade de Pato Branco para dissiminar tendências e informações sobre programação e novas tecnológias

Veja mais sobre o Code Conference

Publique seu post no Receitas de Código

Agora você pode publicar seu post no Receitas de Código e compartilhar seu conhecimento com muitas pessoas!

Quero publicar