Angular Filter (New pipes): Filtros e pipes no Angular

Fique por dentro

Em aplicaç�es web precisamos formatar dados com frequ�ncia. Alguns exemplos s�o apresentar datas e valores monet�rios no formato correspondente a localidade do usu�rio ou tornar um texto mai�sculo ou min�sculo. Os filtros no Angular servem exatamente para isso e s�o muito f�ceis de utilizar, como veremos neste artigo.

Filtros servem para formatar dados. Eles s�o utilizados nos templates dos componentes, geralmente para apresentar datas e valores monet�rios em um formato familiar para os usu�rios.

Por exemplo, com o filtro date � poss�vel formatar uma data para um formato familiar para o usu�rio, como vemos no C�digo 1.

Nele temos a propriedade hoje do componente AppComponent sendo apresentada de duas formas. A primeira delas � sem nenhum filtro, onde usamos a sintaxe conhecida {{ hoje }} para apresentar a propriedade. A segunda � aplicando o filtro date e para fazer isso usamos a sintaxe {{ hoje | date }}, onde | � o operador pipe e date � o filtro que queremos aplicar.


  // app.component.ts
  import { Component } from '@angular/core';
   
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    hoje = new Date(1989, 2, 19);
  }
   
  <!-- app.component.html -->
  <p>{{ hoje }}</p>
   
  <p>{{ hoje | date }}</p>

C�digo 1. Utilizando o filtro date nativo

O resultado desses valores sem filtro, {{ hoje }}, e com filtro, {{ hoje | date }} pode ser visto na Figura 1.

Figura 1. Propriedade apresentada sem e com filtro

Note que Sun Feb 09 2020 12:38:03 GMT-0300 (Hor�rio Padr�o de Bras�lia) � como uma data e apresentada no Angular por padr�o, e que Mar 19, 1989 � esse mesmo dado formato pelo filtro.

Essa data ainda n�o est� em um formato comum para n�s brasileiros, mas veremos como resolver isso mais adiante neste artigo.

Pipes

Com a vers�o 2 do Angular, os filtros passaram a se chamar pipes. Essa mudança foi, em sua maior parte, sem�ntica, ou seja, apenas uma troca de nome, j� que a sintaxe para aplicar um filtro nas duas vers�es � bem parecida.

Pipes nativos do Angular

No Angular, vers�o 2 em diante, temos diversos pipes nativos dispon�veis. Os mais utilizados s�o:

DatePipe para datas;
UpperCasePipe para tornar letras mai�sculas;
LowerCasePipe para tornar letras min�sculas;
CurrencyPipe para moedas.

Sendo DatePipe e CurrencyPipe os mais usados entre todos.

Parametrizando pipes

Os pipes podem receber par�metros, o que permite customizar ainda mais a formataç�o dos dados.

Relembrando, para aplicar qualquer pipe a um dado utilizamos a sintaxe {{ dado | pipe }}. Fizemos isso no C�digo 1, onde utilizamos o pipe date. Contudo, embora a data tenha sido formatada naquele exemplo ela ficou em um formato americano e n�o brasileiro. Para resolver isso podemos usar par�metros no pipe.

Com isso, a sintaxe muda um pouco, pois agora precisamos escrever {{ dado | pipe:�<PARAMETROS�> }}, sendo os par�metros passados entre aspas e duplas por convers�o.

Por exemplo, para usar o formato de data dia/m�s/ano, mais comum aqui no Brasil, podemos utilizar os par�metros dd/MM/yyyy com DatePipe, como mostra o C�digo 2.


  <p>{{ hoje }}</p>
   
  <p>{{ hoje | date:"dd/MM/yyyy" }}</p>

C�digo 2. Usando DatePipe com par�metros

Como resultado na aplicaç�o desses par�metros a data ser� apresentada como 19/03/1989 (Figura 2) e n�o mais Mar 19, 1989, como vimos no C�digo 1.

Figura 2. Usando par�metros com DatePipe

Conhecendo os par�metros de cada pipe

Conhecer os par�metros de cada pipe � importante porque eles devem ser passados em uma ordem espec�fica.

DatePipe pode receber os seguintes par�metros descritos na Tabela 1:

{{ dado | date [ : format [ : timezone [ : locale ] ] ] }}

Format	� um formato pr�-definido de data ou um nome para um formato nativo. Ex: �dd/MM/yyyy h:mm�, �short�
Timezone	� o tempo referente a regi�o na qual o usu�rio est�. Ex: �ISP�, �+0530�
Locale	� o c�digo regra de formataç�o usada. Ex: �en_US�, �pt�

Tabela 1. Par�metros da pipe

Para locale usamos pt no Brasil e n�o pt_BR.

CurrencyPipe pode receber os seguintes par�metros descritos na Tabela 2.

{{ dado | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ]]]] }}

currencyCode	O c�digo da moeda de acordo com o ISO 4217. Ex: �USD�, �BRL�
display	Inclui ou n�o currencyCode na apresentaç�o, se usarmos um booleano, ou substitui esse c�digo por outro texto, se usarmos string. Ex: �true�, �false�, �USD�, �$�
digitsInfo	Configuraç�o de casas decimais no formato �minimoDigitosInteiros.minimoDeDigitosDecimais-maxDigitosDecimais�. Ex: �0.2-2�
locale	� o c�digo regra de formataç�o usada. Ex: �en_US�, �pt�

Tabela 2. Par�metros do CurrencyPipe

Para apresentar um valor em reais usamos o c�digo BRL.

Encadeando pipes

Pipes podem ser utilizados em cadeia, sendo assim chamados um ap�s o outro na ordem em que foram escritos.

Por exemplo, para apresentar o m�s referente a uma data em letras mai�sculas podemos usar DatePipe utilizando par�metros e UpperCasePipe em conjunto. Isso produziria a sequ�ncia de formataç�o apresentada na Figura 3.

Figura 3. Ordem de chamada dos pipes

A sintaxe para utilizar mais de um pipe n�o muda muito, dessa vez usamos {{ dado | pipe1 | pipe2... }}, separando cada pipe com o operador |.

Vamos ver um exemplo usando DatePipe e UpperCasePipe juntos e depois a gente parametrizar um deles para demonstrar como fazer isso tamb�m.

Ent�o, aplicamos mais de um pipe conforme apresentado no C�digo 3.

<p>{{ hoje }}</p>
   
  <p>{{ hoje | date | uppercase }}</p>

C�digo 3. Usando DatePipe e UpperCasePipe em conjunto

Note que sempre que precisamos aplicar um pipe utilizamos o operador | seguido do nome do pipe desejado. Aqui, como usamos dois pipes, date e uppercase, tamb�m precisamos do operador | duas vezes, uma vez para cada pipe.

Como resultado teremos o efeito na view apresentado na Figura 4.

Figura 4. Usando DatePipe e UpperCasePipe em conjunto

Agora, para parametrizar um dois pipes fazemos como antes, informando os par�metros entre aspas.

Vamos aplicar o filtro a DatePipe como antes, mas dessa vez, para que a gente consiga ver UpperCasePipe funcionando usaremos o formato dd/MMM/yyyy, escrevendo tr�s vezes o M. Assim o m�s ser� escrito por extenso, como mostra o C�digo 4.


  <p>{{ hoje }}</p>
   
  <p>{{ hoje | date:"dd/MMM/yyyy" | uppercase }}</p>

C�digo 4. Usando mais de um pipe e com par�metros

Como resultado teremos o efeito na view apresentado na Figura 5.

Figura 5. DatePipe parametrizado

Com isso a data � formatada por DatePipe e esse dado � novamente transformado por UpperCasePipe, sendo finalmente apresentado para o usu�rio.

Utilizando CurrencyPipe

Ap�s aprender como um pipe funciona voc� j� sabe o suficiente para utilizar qualquer outro.

Por exemplo, ao aplicar CurrencyPipe em um valor qualquer teremos um c�digo muito parecido com o que vimos anteriormente, como mostra o C�digo 5.


  // app.component.ts
  import { Component } from '@angular/core';
   
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    preco = 19.99;
  }
   
  // app.component.html
  <p>{{ preco }}</p>
   
  <p>{{ preco | currency }}</p>

C�digo 5. Usando CurrencyPipe

O resultado na view ser� o da Figura 6.

Figura 6. CurrencyPipe parametrizado

Contudo, veja que o s�mbolo de moeda utilizado foi d�lar ($) e n�o reais (R$).

O Tio Sam curtiu isso

Isso � um problema para aplicaç�es executadas aqui no Brasil.

Corrigindo problemas com localizaç�o

Uma forma de resolver esse problema � parametrizando CurrencyPipe para um local apropriado, como vemos no C�digo 6.


  <p>{{ preco }}</p>
   
  <p>{{ preco | currency:"BRL" }}</p>

C�digo 6. Parametrizando CurrencyPipe com BRL

Com isso o resultado apresentado na view ser� o da Figura 7.

Figura 7. Valor apresentado em reais

No caso das datas informamos a timezone e o local para format�-las em portugu�s. Temos diversas opç�es de timezone, mas geralmente utilizamos os valores IST ou +0530, que s�o padr�es internacionais.

Sabendo disso, a express�o no template do componente ficar� conforme o C�digo 7 para apresentar o m�s em portugu�s.

<!-- app.module.html -->
  <p>{{ hoje }}</p>
   
  <p>{{ hoje | date:"dd/MMM/yyyy":"IST":"pt" }}</p>

C�digo 7. Express�o do componente para m�s em portugu�s

Como resultado teremos a view apresentada na Figura 8.

Figura 8. Parametrizando DatePipe para apresentar o m�s em portugu�s

Com isso o nome do m�s apresentado ser� março em portugu�s.

Conclus�o

Aprendemos neste artigo como resolver um problema que geralmente vemos no nosso dia a dia como programadores, pois sempre precisamos apresentar datas e valores monet�rios. Os filtros no Angular s�o muito f�ceis de utilizar.

Confira tamb�m

Primeiros passos com Angular

Curso

O que � Angular?