Artigos Angular Angular Filter e pipes
Por que eu devo ler este artigo: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.

Propriedade apresentada sem e com filtro
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.

Usando parâmetros com DatePipe
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.

Ordem de chamada dos pipes
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.

Usando DatePipe e UpperCasePipe em conjunto
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.

DatePipe parametrizado
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.

DatePipe parametrizado
Figura 6. CurrencyPipe parametrizado

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

Tio Sam
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.

Valor apresentado em reais
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.

Parametrizando DatePipe para apresentar o mês em português
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

Primeiros passos com Angular

Curso
O que é Angular?

O que é Angular?

Curso
Um Bate-papo sobre Angular

Um Bate-papo sobre Angular

Vídeo