Pipes - parte 1

Olá!,

Neste post vamos estudar um pouco sobre pipes, e como utilizar, alguns pipes definidos pelo Angular.

Conteúdo

  1. O que são pipes
  2. date
  3. currency
  4. Mais pipes do angular
  5. 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

AsyncPipe
CurrencyPipe
DatePipe
DecimalPipe
DeprecatedCurrencyPipe
DeprecatedDatePipe
DeprecatedDecimalPipe
DeprecatedPercentPipe
I18nPluralPipe
I18nSelectPipe
JsonPipe
LowerCasePipe
PercentPipe
SlicePipe
TitleCasePipe
UpperCasePipe

 

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

 

Comentar

Loading