Angular: Pipes
Material completo: Iniciando os estudos com Angular
Os pipes, são classes no Angular e tem como objetivo transformar os dados de entrada, formata-los e entregar no formato desejado de acordo com o pipe utilizado. Por exemplo, existem pipes para transformar tudo em maiúsculo (uppercase), minúsculo (lowercase), data (date), além de muitas outras e a possibilidade de criar nossos próprios pipes.
Pipes (usando pipes, parâmetros e pipes aninhados)
Vamos começar criando um novo componente para testar alguns pipes, basta executar:
ng g c exemplos-pipesCom o componente criado, criaremos um objeto “livro” com algumas propriedades apenas de exemplo.
No nosso template, utilizando interpolação, exibiremos todas as informações do objeto que criamos em tela.
Esse é o resultado final, apenas exibindo as informações em tela sem nenhum tratamento, estranho né? Principalmente a data e o livro.
Agora, começaremos a trabalhar com as pipes, para começar a utilizar basta seguir a estrutura abaixo:
// Para utilizar uma pipe
{{ nomeVariavel | nomePipe }}// Para utilizar uma pipe e passar parâmetros
{{ nomeVariavel | nomePipe:argumentos }}
A seguir, temos alguns exemplos de pipes que utilizamos para formatar alguns dados em tela, segue as pipes e explicações.
Esse é nosso template utilizando as pipes, foram utilizados apenas alguns exemplos, na documentação do Angular possuí diversas outras e a possibilidade de criar nossas próprias.
Criando um pipe
Primeiro, vamos criar um novo pipe utilizando o Angular CLI através do comando:
ng g p camel-caseAssim que o código for gerado, podemos observar que essa classe é identificada com um decorador @Pipe() e já vem com o método transform() criado, responsável por receber o valor a ser transformado (value) e os argumentos que podemos passar (…args).
O objetivo desse pipe, é transformar uma frase em CamelCase, com as primeiras letras em maiúsculo e o restante em minúsculo.
Abaixo segue nosso código, para o nosso método transform() não ficar com muita responsabilidade, criamos um novo capitalize(), responsável por tratar os caracteres da palavra recebida.
Agora é só aplicar o pipe customizado em alguma string do seu template, primeiro deixamos todo o titulo em letra maiúscula, depois transformamos em CamelCase.
A ordem das pipes importa e o Angular irá executar essas transformações na sequencia declarada.
Esse é o resultado utilizando nossa pipe customizada.
Aplicando Locale (Internacionalização) nos Pipes
Por padrão, o Angular irá utilizar o padrão “en-US” para tudo, seja para separar um valor decimal com ponto, exibir uma data no padrão americano entre outros. Como resolver essa questão e trazer para o padrão brasileiro?
O modo de realizar esse método apresentado no curso provavelmente mudou e não funcionou, acabei encontrando essa nova forma.
Dentro no arquivo app.module.ts, precisamos importar e utilizar o método registerLocaleData(), como falamos, o Angular vem como padrão o inglês americano e para utilizar globalmente outro pacote de idioma precisamos registra-lo.
Para registrar, precisamos importar o pacote de idiomas desejado, no nosso caso será o pacote:
import ptBR from '@angular/common/locales/pt';Sim, o pacote para o Brasil é somente “pt”, essa é uma atualização que foi feita, antigamente importávamos o pacote “pt-BR”. Para quem é de Portugal, pode utilizar a importação “pt-PT”.
Após a importação, passamos como argumento para o registerLocaleData(ptBR).
Agora, precisamos disponibilizar isso para toda a aplicação, então precisamos atualizar nossos providers.
providers: [
{
provide: LOCALE_ID,
useValue: 'pt-BR'
}
]Depois de seguir todo esse processo, teremos nosso arquivo parecido com o código abaixo:
Observe que agora os números que possuem décimos e a moeda estão separados por virgula além da data estar no padrão brasileiro.
Pipes: Criando um Pipe Puro
Por padrão, os pipes no Angular são definidos como pipes puros, o Angular executa esse pipe apenas quando detectar uma alteração pura no valor de entrada.
Mudança pura: Mudança no valor de entrada primitivo (String, Number, Boolean ou Symbol).
Ou seja, qualquer alteração feita em objetos compostos, como um elemento recém adicionado em um array existente, será ignorado pois não é performático realizar verificações mais profundas dentro dos objetos.
Get Rafael Simionato Zorzenon’s stories in your inbox
Join Medium for free to get updates from this writer.
Vamos aprender como esses pipes se comportam na prática, para isso, vamos criar um novo:
ng g p filtro-arrayO pipe “filtroArray” criado em aula é puramente didático e não deve ser replicado em um projeto real, devido a questões de performance.
Assim que criarmos nosso pipe, vamos criar um código para ter o comportamento de um filtro. Se nosso array estiver vazio ou nenhum argumento for passado, devemos retornar o array completo.
Caso essas condições não sejam aceitas, retornaremos nosso array filtrado.
Em nosso componente, criaremos um array “livros” com alguns livros já criados e uma propriedade “filtro” que receberá um valor de um input futuramente. Também temos o método addCurso() responsável por adicionar novos cursos no array.
No nosso template, temos a estrutura abaixo contendo:
- Input para buscar e filtrar um curso, recebendo um ngModel;
- Input e Button para receber um novo curso e chamar a função addCurso();
- Lista que renderiza os cursos e recebe nossa pipe “filtroArray” responsável por filtrar a lista.
Dissemos que as pipes por padrão são puras e não observam mudanças de valor de objetos compostos, certo? Abaixo, adicionamos 2 novos cursos e a lista é renderizada instantaneamente em tela.
Mas, quando a lista está recebendo um filtro e tentamos adicionar um novo curso, ela não recebe nenhuma atualização em tela, isso porque o Angular não está observando essas mudanças.
Pipes: Criando um Pipe Impuro
Para criar um pipe impuro, precisamos adicionar somente uma metatag dentro do nosso pipe e o Angular passará a enxergar mudanças em objetos compostos.
Mas, seguiremos da maneira que foi feita no curso, para observamos as diferenças dos dois em tela. Criaremos um novo pipe:
ng g p filtro-array-impuroPara aproveitar a função criada no primeiro pipe (pipe puro), reutilizamos utilizando o “extends FiltroArrayPipe” e adicionamos a metatag “pure: false”.
Agora, no template vamos deixar as duas lado a lado para que seja possível visualizarmos a diferença de comportamento. Na segunda lista, adicionaremos nossa nova pipe “FiltroArrayImpuro”.
Esse é o resultado, agora o Angular passa a observar todas as mudanças que fazemos no nosso array de livros.
Lembrando que: Ordenação e filtros não devem ser feitos utilizando pipes, criamos apenas para aprendizagem. A forma correta é através de métodos no componente que recebem a lista, realiza a filtragem e retorna um novo array.
Pipes: Async (Assíncrono)
Para casos que precisamos aguardar uma requisição ao servidor ou que a resposta não seja imediata, podemos utilizar o pipe async.
{{ nomeVariavel | async }}No nosso componente.ts, vamos simular uma chamada ao servidor, criaremos uma Promise(), onde irá demorar 2 segundos para nos dar um retorno.
Se tentarmos exibir o valor desse retorno diretamente no nosso template, não obteremos o resultado desejado.
Se não utilizarmos nenhum pipe, será impresso em tela um objeto, se utilizarmos o pipe json para mostrar o que tem dentro, teremos outro resultado indesejado.
// Sem utilizar pipes
[object Promise]// Exibindo o objeto com a pipe json
{ "__zone_symbol__state": true, "__zone_symbol__value": "Valor assíncrono" }
Nesses casos, utilizamos o pipe async, o Angular irá esperar até ter o retorno da chamada para exibir o valor em tela.
Esse é o resultado, como temos um setTimeout(2000) de 2 segundos para realizar a chamada, o Angular aguarda esse tempo, só depois é exibido o retorno em tela.
