Angular Pipes: Uma visão mais profunda

O conceito de um Pipe no Angular é muito simples. Ele é composto por uma função a ser utilizada no template HTML. Esta função aceita valores de entrada e retorna um valor transformado. Um exemplo clássico e muito útil é o DatePipe para a formatação de datas.

Apesar da simplicidade, o Pipe pode ser uma peça chave para muitas aplicações. Com ele temos uma maior reutilização de código, ganhos de performance e uma maior legibilidade já que não precisamos “sujar” o TypeScript dos nossos componentes.

Encadeando Pipes

Podemos encadear quantos Pipes forem necessários para a transformação dos dados. O exemplo abaixo primeiramente formata uma data e, logo a seguir, transforma todo o texto em caixa alta com o UpperCasePipe.

O Poder do AsyncPipe

Agora vamos um pouco mais a fundo em sua utilização. Sabemos que no Angular é muito comum o uso de Observables para a manipulação de eventos, chamadas HTTP e muitas outras operações reativas. Sabemos também que para recuperar os valores de um Observable precisamos nos inscrever (subscribe).

O AsyncPipe é com certeza um dos recursos mais poderosos dentro do Angular. Ele realiza justamente essa operação de se inscrever em um Observable diretamente no template. Melhor ainda é que quando o componente for destruído ele irá se desinscrever do Observable automaticamente, evitando assim os temidos vazamentos de memória.

Veja abaixo a utilização do AsyncPipe para buscar os dados de um indivíduo do servidor e apresentá-los no template HTML. Um código limpo e elegante!

Unindo os conceitos

Agora que aprendemos a técnica de encadeamento de Pipes e o uso do AsyncPipe, vamos uni-los para alcançar resultados ainda melhores.

Em nossa aplicação temos diversos componentes que recebem um indivíduo por Input e, consequentemente, utilizamos frequentemente um serviço para recuperar os dados do mesmo e retornar para um Observable.

Em vez de injetar este serviço em dezenas de componentes, criamos um Pipe para realizar somente esta tarefa, aplicando assim o Princípio da Responsabilidade Única. Ele simplesmente recebe o código do indivíduo por parâmetro e retorna a chamada do método do serviço.

Com isso, agora fomos capazes de remover muitas linhas de código e eliminamos a dependência do serviço para os componentes. Como benefício, ganhamos componentes muito mais enxutos, além de uma maior facilidade na realização de seus testes unitários, uma vez que agora temos uma dependência a menos.

Por fim, vamos ao uso dele. Iremos chamá-lo em seu template HTML fazendo o uso das duas técnicas vistas anteriormente. Primeiramente passamos o Pipe que busca o indivíduo através de seu código. Como sabemos que o seu retorno é um Observable, agora basta encadearmos o AsyncPipe para que o mesmo seja inscrito e demonstrado no template!

Conclusão

Espero que este artigo tenha lhe proporcionado uma visão mais profunda da utilização dos Pipes. Eles possuem funções muito mais poderosas do que a simples transformação de dados. Até a próxima!