Curso Angular 2 – Aula 4: Filtros

Curso básico gratuito de Angular 2 | kazale.comO objetivo dessa aula é apresentar os filtros no Angular 2, também conhecidos como pipes, que permitem formatar um texto (data, moeda, CEP, …) antes de exibi-lo na tela.

 

Digite seu email para se inscrever em nossa newsletter e receber atualizações sobre novos conteúdos.

Ao término dessa aula você aprenderá a usar filtros, assim como criar o seu próprio pipe para formatar os dados na tela.

1. Definição

Filtros, ou pipes como é chamado originalmente em inglês, nada mais são do que funções que aplicam alguma transformação em um valor a ser exibido no template.

Esses valores podem ser um texto simples, uma data, uma número, um valor monetário, ou até mesmo um valor customizado como um número de RG ou CPF.

Sua utilização é feita através do operador pipe “|”, e funciona de modo muito similar ao comandos utilizados no console de texto de um sistema operacional Unix.

Caso você nunca tenha utilizado um sistema operacional Unix, basicamente o operador pipe funciona como um encadeamento de execuções, onde as funções passadas entre os pipes recebem como entrada o valor de saída da operação executada anteriormente, conforme veremos a seguir.

2. Filtros de formatação de texto

Vamos iniciar estudando os mais simples dos filtros, que são os filtros de transformação de texto.

No exemplo a seguir estamos exibindo um texto em caixa alta (uppercase), e o outro em caixa baixa (lowercase)

O filtros ‘uppercase’ e ‘lowercase’ utilizados acima compõem a implementação padrão do Angular 2, assim eles já estão disponíveis para uso diretamente no template.

Ainda no exemplo acima, repare como o filtro é aplicado. Nós definimos uma variável ‘texto’ contendo o valor ‘Curso de Angular 2’.

Ao chamar a variável ‘texto’ no template, adicionamos o operador pipe seguido do nome do filtro, assim o Angular 2 se encarregará de passar o valor a ser exibido na tela para o filtro ‘uppercase’ ou ‘lowercase’, que transformará a entrada gerando a saída desejada.

Vale salientar que podemos utilizar mais de um filtro em sequencia utilizando o operador pipe.

3. Formatando valores monetários

Valores monetários são dados utilizados com muita frequência, e variam de país para país dependendo da moeda escolhida, assim o Angular 2 fornece um filtro específico para formatação de valores monetários.

O filtro ‘currency’ é o responsável por tal formatação, e ele possui dois parâmetros de configuração, conforme o exemplo a seguir:

No exemplo acima, repare que utilizamos o operador de dois pontos para separar os parâmetros de configuração, e os parâmetros aceitos indicam a moeda em questão, e se o símbolo deve ser exibido.

A moeda a ser utilizada deve seguir o padrão de três letras utilizadas para a identificação da mesma, como BRL, USD, EUR, AUS…

O segundo parâmetro serve para exibir ou não o símbolo da moeda, como por exemplo o BRL que exibiria R$, ou USD que exibiria $.

4. Formatando data

Assim como valores monetários, utilizamos datas com muita frequência, e elas também variam de país para país. Sendo assim o Angular 2 também possui um filtro padrão utilizado para formatação de datas.

O filtro utilizado para a formatação de datas é o ‘date’, e ele possui como parâmetro o formato da data, conforme o exemplo a seguir:

O Angular 2 utiliza o mesmo padrão de valores para formatação utilizados pelo JavaScript, e para maiores detalhes sobre quais valores utilizar, basta visualizar a tabela exibida na documentação oficial em https://angular.io/docs/ts/latest/api/common/DatePipe-class.html.

Repare que a data apresentada exibe o dia e mês invertidos, isso é devido ao Angular 2 ainda não ter implementado a internacionalização, conforme encontrado no código fonte:

5. Criando o seu próprio filtro (CEP)

Por fim, podemos facilmente cria nosso próprio filtro, pois muitas vezes precisamos aplicar transformações que não são suportadas pelo Angular 2, como formatar um CEP, CPF, entre outros.

Para criar nosso próprio filtro devemos criar uma classe que utilize a anotação ‘Pipe’ contendo a metadata ‘name’, além de implementar a interface ‘PipeTransform’, ambas do pacote core do Angular 2.

Ao implementar a interface ‘PipeTransform’, você deverá sobrescrever o método ‘transform’, que receberá o texto padrão como entrada e retornará o texto de modo a ser exibido na tela.

Observe o exemplo abaixo:

Repare que recebemos o texto de entrada como parâmetro do método ‘transform’, aplicamos a formação a ele, e depois retornamos o valor a ser exibido na tela.

Uma vez implementado nosso filtro, devemos importá-lo em nosso componente, registrá-lo na metadata ‘pipes’, e utilizá-lo em nosso template, conforme exemplo abaixo:

6. Outros filtros

A API padrão do Angular 2 possui alguns outros filtros implementados, e mais ainda deverão ser adicionados com o tempo.

Para manter atualizado sobre os filtros existentes acesse regularmente a documentação oficial em https://angular.io/docs/ts/latest/api/#!?apiFilter=pipe

Clique para fazer o download dos arquivos do template base da aula 4.

Clique para fazer o download dos arquivos do projeto completo desenvolvido na aula 4.

6 comentários em “Curso Angular 2 – Aula 4: Filtros

  1. Fiz aqui e deu tudo certo no Chrome, já no Safari Versão 9.1.1 os Campos de Data não aparecem! Há alguma incompatibilidade??? Parabéns pelas aulas!

    1. Olá Marcelo,

      o que acontece é que o Safari não suporta a implementação Intl do JavaScript para internacionalização, como pode ser visto aqui https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Intl .

      Para solucionar esse problema você teria que incluir um polyfill, que é um código JavaScript responsável por adicionar a mesma funcionalidade encontrada em navegadores que implementam esse recurso.

      Não cheguei a testar, mas parece que esse polyfill deve solucionar seu problema: https://github.com/andyearnshaw/Intl.js

  2. Infelizmente não é útil pra quem não usa padrão americano. Nas datas, não importa a ordem que a gente coloca, o pipe sempre coloca como MM/dd/yyyy.
    No caso de números, em português usamos a vírgula para separar os decimais e o ponto para os grupos de milhares.
    Sobra apenas termos que fazer sempre nossos próprios pipes.

    1. Olá Ronaldo,

      a parte de internacionalização no Angular 2 ainda não foi implementada, por enquanto teremos que criar nossos próprios pipes para isso, mas no futuro teremos esse recurso nativo dentro do framework.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

nove + 5 =