Olá!,
Neste post vamos estudar um pouco sobre pipes, e como utilizar, alguns pipes definidos pelo Angular.
Conteúdo
- O que são pipes
- date
- currency
- Mais pipes do angular
- Utilizando pipes
O que são pipes
Os pipes são utilizados basicamente para transformar e formatar dados diretamente no template como por exemplo formatação de data, moeda, percentual entre outros
date (https://angular.io/api/common/DatePipe)
o pipe date é utilizado para a formatação de datas
date_expression | date[:format[:timezone[:locale]]]
onde:
date_expression: é um objeto do tipo data
date: é o nome do pipe,
format: é a formatação da data (ex.: 'dd/MM/yyyy' 05/12/2017)
timezone: também utilizado para formatação da data, pode ser utilizado com o código UTC/GMT ou com time zone offset (ex.:'+0430')
locale: é a localidade a ser utilizada formatação (ex.: "pt")
currency (https://angular.io/api/common/CurrencyPipe)
o pipe currency é utilizado para a formatação de moedas
number_expression | currency[:currencyCode[:display[:digitInfo[:locale]]]]
onde:
number_expresion: é o número a ser formatado
currency: é o nome do pipe
currencyCode: é o código ISO da moeda ex.: USD, BRL, EUR
display: define se será exibido o código da moeda ou o símbolo
code: exibe o código da moeda (ex.: "USD"),
symbol: exibe o símbolo da moeda (ex.: "US$").
symbol-narrow: exibe o símbolo abreviado (ex.: "$")
digitInfo: é a formatação das casas decimal (ex.: 3.1-2) quer dizer que o numero deve ter pelo menos 3 digitos na parte inteira, caso tenha menos é completado com zeros e na parte decimal terá no mínimo 1 e no máximo 2 digitos,
locale: é a localidade a ser utilizada formatação (ex.: "pt")
para utilizar o locale é necessário registrar a localidade na aplicação, por exemplo na app.module registrar da seguinte forma:
import localePt from '@angular/common/locales/pt';
import { registerLocaleData } from '@angular/common';
registerLocaleData(localePt);
obs: não encontrei o locale específico para "pt-br" na versão 5 do angular
Então para a formatação de moeda brasileira Reais(BRL) os paramêtros seriam:
{{1000, currency:'BRL':'symbol':'0.0-2':'pt'}} - resultaria em R$1.000,00
Mais pipes do angular
abaixo segue o link onde é possível ver a documentação de outros pipes fornecidos pelo angular
Utilizando os pipes
Vamos primeiro ciriar um componente no qual os nossos exemplos serão adicionados:
ng g c exemplos/pipes
vamos agora editar o arquivo "pipes/pipe.componentes.ts"
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-pipes',
templateUrl: './pipes.component.html',
styleUrls: ['./pipes.component.css']
})
export class PipesComponent implements OnInit {
data:Date = new Date();
moeda:number = 123456.78;
constructor() { }
ngOnInit() {
}
}
vamos agora editar o arquivo "pipes/pipe.component.html"
<h1>Pipes</h1>
<hr>
<div class="container-fluid">
<h2>Exemplos - pipes</h2>
<table class="table">
<thead>
<tr>
<th>pipe</th>
<th>sem formatação</th>
<th>formato</th>
<th>formatado</th>
<th>documentação</th>
</tr>
</thead>
<tbody>
<tr>
<td>date</td>
<td>{{date}}</td>
<td>yyyy/MM/dd HH:mm:ss</td>
<td>{{data | date: 'yyyy/MM/dd HH:mm:ss' }}</td>
<td><a target="_blank" href="https://angular.io/api/common/DatePipe">https://angular.io/api/common/DatePipe</a></td>
</tr>
<tr>
<td>currency</td>
<td>{{moeda}}</td>
<td></td>
<td>{{moeda | currency}}</td>
<td><a target="_blank" href="https://angular.io/api/common/CurrencyPipe">https://angular.io/api/common/CurrencyPipe</a></td>
</tr>
<tr>
<td>currency</td>
<td>{{moeda}}</td>
<td>'BRL':'symbol':'0.1-1':'pt'</td>
<td>{{moeda | currency:'BRL':'symbol':'0.1-2':'pt'}}</td>
<td><a target="_blank" href="https://angular.io/api/common/CurrencyPipe">https://angular.io/api/common/CurrencyPipe</a></td>
</tr>
</tbody>
</table>
<hr />
</div>
adicionando a rota(exemplos-routing.module.ts) para o componente:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ComponentsComponent } from './components/components.component';
import { DirectivesComponent } from './directives/directives.component';
import { PipesComponent } from './pipes/pipes.component';
const routes: Routes = [
{
path: 'exemplos', children: [
{ path: '', component: ComponentsComponent },
{ path: 'componentes', component: ComponentsComponent },
{ path: 'diretivas', component: DirectivesComponent },
{ path: 'pipes', component: PipesComponent }
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ExemplosRoutingModule { }
rodando a aplicação
ng serve -o
navegando para
http://localhost:4200/exemplos/pipes