Jornada Frontend

O que é um Pipe Angular

Pipe nos ajuda a transformar dados que estão em um formato para outro. Eles são chamados assim pois usa o “|” para chamá-lo.

Vamos imaginar que queremos que o formato de nosso calendário na aplicação seja o seguinte DD/MM/YYYY e por padrão o JavaScript “Date()” é de outra forma.

Uma forma muito simples de lidar com isso é usando o Pipe e a sintaxe ficaria desta forma.

Que nos retornará o seguinte:

28/04/2022

Quer saber mais sobre o Angular? Acompanhe o Blog e o meu curso => Aqui

Como usar Pipes

Vamos dar uma rápida olhada em como é a sintaxe do pipe que é seguida dos dados e depois a estrutura.

E como estamos no Angular ele nos fornece vários recursos já prontos para trabalhar com pipes, vamos dar uma olhada:

  • Json pipe;
  • Lowercase pipe;
  • Uppercase pipe;
  • Async pipe;
  • Titlecase pipe;
  • Date pipe;
  • Currency pipe;
  • Percent pipe;
  • Decimal pipe;
  • Slice pipe.

Pipes são fáceis de usar e de combinar entre si, vamos dar um exemplo de como funcionaria.

No exemplo acima temos vários tipos de dados, desde arrays, strings, números, json.

Agora vamos colocar ele na estrutura HTML e mostrar em tela o resultado.

Vimos no exemplo acima que o Angular nos permite manipular os dados de forma incrível com os pipes.

Os Pipes também podem ser usados com Promise ou Observable e retornar o último valor emitido.

Quando o componente é destruído o Pipe automaticamente faz o unsubscribe para evitar memory leak.

Vamos ver um exemplo onde criaremos uma Promise chamada “nome”.

Depois vamos criar um método que chamaremos de “getNome()” que atribui um texto ao objeto depois de 3 segundos de forma assíncrona.

Depois vamos atribuir o objeto nome ao construtor.

Antes de completar os 3 segundos o “nome” é uma Promise do tipo null e depois de 3 segundos ele se torna uma Promise do tipo string com um texto dentro.

Como uma boa prática, vamos deixar uma mensagem de carregando, assim o usuário não fica sem saber o que está acontecendo dentro da aplicação.

Como criar um Pipe customizado

Para não surpreender ninguém, o CLI nos permite adiantar o processo de criar um Pipe.

Ng generate pipe nome_do_pipe

Então vamos criar o nosso querido pipe com o nome de “sqrt” (que significa square (quadrado) em inglês), vamos usar o nome em inglês por conta do método que irá calcular um quadrado.

Ng g p sqrt

Até aqui sem novidades, irá criar os dois arquivos o “.spec” e o “.ts”.

O arquivo “.ts” do nosso Pipe irá parecer com algo assim.

O Angular requer que usemos o transform() para alocar a nossa lógica dentro dele.

Vamos usar somente um tipo o Number, então podemos remover o resto.

Depois vamos criar nossa lógica dentro do Transform().

Então vamos usar o nosso pipe dentro do componente.

Então podemos ver a saída e os valores em tela.

Tenha uma carreira
Front-end de Sucesso!

Ebook - JORNADA FRONT-END

Fruto de mais de 7 anos estudando e trabalhando com Front-end, a "Jornada Front-end - O Guia Definitivo" é um manual completo para todos que querem subir em suas carreiras do zero ou subir do seu nível atual.

Ebook enviado com sucesso! Verifique sua caixa de e-mail.

Share This