Para que serve um pipe no Angular?
19/10/2017
0
Fala pessoal, estou estudando angular e não entendi para que serve um pipe. Não consegui ver uma utilidade do mesmo numa aplicação. Alguém pode me ajudar?
Robson Cavalcante
Curtir tópico
+ 0
Responder
Post mais votado
20/11/2017
Olá Robson,
Podemos dizer que o Pipe funciona como uma máscara na sua aplicação. Um exemplo seria ao consultar uma api externa você receba um JSON com uma data no formato americano, com o Angular você poderia criar um pipe para tratar essa data e exibi-lá ao usuário no formato pt-br.
Ficaria muito simples na sua aplicação:
Ao aplicar o pipe dataBr ele realiza as modificações necessárias para que a data possa ser exibida.
Podemos dizer que o Pipe funciona como uma máscara na sua aplicação. Um exemplo seria ao consultar uma api externa você receba um JSON com uma data no formato americano, com o Angular você poderia criar um pipe para tratar essa data e exibi-lá ao usuário no formato pt-br.
Ficaria muito simples na sua aplicação:
<h4 class="modal-title" id="modalLabel">
Cotação em {{ dataCotacao | dataBr }}
</h4>Ao aplicar o pipe dataBr ele realiza as modificações necessárias para que a data possa ser exibida.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'dataBr'
})
export class DataBrPipe implements PipeTransform {
/**
* Aplica formatação para a data.
*
* @param string dataEn
* @return string data no formato dd/mm/yyyy
*/
transform(dataEn: string): string {
if (!dataEn) {
return '';
}
const dataArr = dataEn.split('-');
if (dataArr.length !== 3) {
return dataEn;
}
return dataArr[2] + '/' + dataArr[1] + '/' + dataArr[0];
}
}
Paulo Freitas
Responder
Mais Posts
21/12/2017
Robson Cavalcante
É um ótimo recurso Paulo, obrigado pela explicação. Apliquei ele num mini-projeto e me foi muito útil!
Responder
22/12/2017
Juliano
Olá, dá uma olhada nesse material : https://thiagomelin.com.br/2017/01/25/criando-um-pipe-customizado-no-angular-2/
Responder
Clique aqui para fazer login e interagir na Comunidade :)