Transformando dados usando Pipes
Segundo a documentação do Angular devemos utilizar Pipes para transformar dados em Strings.
Use Pipes para transformar strings, valores monetários , datas e outros dados para exibição. Pipes são funções simples que você pode usar em expressões nos Templates para aceitar um valor de entrada e retornar um valor transformado. Pipes são úteis porque você pode usá-los em todo o seu aplicativo, declarando cada Pipe apenas uma vez. Por exemplo, você usaria uma barra vertical para mostrar uma data como 15 de abril de 1988 em vez do formato de string bruto.
O Angular fornece Pipes para os dados que são mais comumente transformados, esses Pipes geralmente usam informações de localidade do usuário para formatação. Segue uma lista com alguns dos Pipes fornecidos pelo Angular:
-
DatePipe: Formata um valor de data de acordo com as regras locais.
-
UpperCasePipe: Transforma todos caracteres do texto para maiúsculo.
-
LowerCasePipe: Transforma todos caracteres do texto para minúsculo.
-
CurrencyPipe: Transforma um número em uma string de moeda, formatada de acordo com as regras do local.
-
DecimalPipe: Transforma um número em uma string com um ponto decimal, formatado de acordo com as regras de local.
-
PercentPipe: Transforma um número em uma string de porcentagem, formatada de acordo com as regras de localidade.
Para obter uma lista completa de todos os Pipes disponibilizados pelo Angular, consulte esta documentação.
Pré-requisitos
Para utilizar Pipes, você deve ter os seguintes conhecimento sobre Angular:
-
Typescript e HTML 5
-
Templates em HTML com CSS
-
Componentes
Usando Pipes em Templates
Vamos criar um componente chamado de PipeComponent contendo duas variáveis, uma delas sendo do tipo String contendo um nome no qual vamos transformar todos os caracteres em maiúsculo utilizando o Pipe uppercase, já nossa segunda variável é do tipo Date a qual vamos formatar sua saída utilizando o Pipe date customizando o formado da saída para dia/mês/ano.
import { Component } from '@angular/core';
@Component({
selector: 'app-Pipes',
template: `
<p>Meu nome é {{name | uppercase}} e minha data de nascimento é {{ birthday | date "MM/dd/yy" }}</p>
`
})
export class PipeComponent {
name: String = "Gaspar Barancelli Junior";
birthday: Date = new Date(1987, 12, 19);
}Ao obtermos o html gerado pelo componente acima, temos a seguinte saída ao utilizar os Pipes para transformação:
Meu nome é GASPAR BARANCELLI JUNIOR e minha data de nascimento é 19/12/1987.Criando Pipes customizados
Para criar um Pipe customizado, devemos criar uma classe que implemente a interface PipeTransform e implementar o método transform, esse método recebe por parâmetro o tipo de objeto que desejamos converter e retornar uma String contendo o objeto transformado.
No código a seguir vamos criar um Pipe para formatar CPF ou CNPJ.
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({name: 'cpfCnpj'})
export class CpfCnpjPipe implements PipeTransform {
transform(value: string): string {
if (!value) {
return null;
}
const identificacao = value.replace(/[^0-9]/g, '');
if (identificacao.length === 11) {
return identificacao.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/g, "\$1.\$2.\$3\-\$4");
} else if (identificacao.length === 14) {
return identificacao.replace(/(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/g, "\$1.\$2.\$3\/\$4\-\$5");
}
return value;
}
}A implementação do Pipe acima é bem simples, primeiro é verificado se o valor recebido por parâmetro é indefinido ou nulo, caso não exista um valor valido é retornado nulo, caso contrario o próximo passo é remover todos os caracteres não números do valor recebido por parâmetro, e por fim, identificar o tipo de documento pela quantidade de dígitos e aplicar a formatação para cada tipo de documento.
Para utilizar o nosso Pipe, precisamos declara-lo ou importa-lo. Caso nossa aplicação tenha apenas um modulo Angular, basta declarar o Pipe acima no seu AppModule, mas como a grande maioria das aplicações Angular possuem mais de um modulo, para que possamos utilizar nosso Pipe em vários desses módulos, devemos envelopar o nosso Pipe em um modulo, e esse modulo é que deve ser importado nos demais módulos, para que seja possível a utilização do nosso Pipe.
Abaixo segue a implementação do nosso modulo envelopando o nosso Pipe, devemos apenas declarar e exportar o nosso Pipe.
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {CpfCnpjPipe} from "./cpfCnpj.Pipe";
@NgModule({
imports: [
CommonModule,
],
declarations: [
CpfCnpjPipe,
],
exports: [
CpfCnpjPipe,
],
})
export class CpfCnpjPipeModule { }Com o modulo CpfCnpjPipeModule criado, vamos importa-lo em nosso AppModule.
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {CpfCnpjPipe} from "./cpfCnpj.Pipe.module";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CpfCnpjPipeModule,
],
bootstrap: [AppComponent]
})
export class AppModule { }Com o modulo importado agora podemos editar nosso template app.component.html, e adicionar dois documentos para formatação utilizando nosso Pipe.
CPF: {{62185134590 | cpfCnpj}}, CNPJ: {{55533976000111 | cpfCnpj}}Ao acessarmos no navegador a pagina principal da nossa aplicação, vamos obter a seguinte saída:
CPF: 621.851.345-90, CNPJ: 55.533.976/0001-11Pipes são transformadores poderosos e muito simples de implementar, além de fazer com que o desenvolvedor siga um padrão de implementação evita-se a duplicidade de código, portanto, sempre que precisar modificar a saída de algum dado, faça uso de Pipes.
