USANDO PIPES, PARAMETROS E PIPES ANINHADOS

pipes sao filtros para realizar a formatacao de dados nos templates, existem diversos casos, vamos tomar alguns exemplos. para mais informacoes sobre pipes nativos do Angular consulte angular commom packge na secao pipes.

OBS: os pipes nativos fazem parte do commom package disponivel no java core, esta disponiveis por padrao no escopo global da aplicacao, para definir os escopos de pipes personalizados, devem ser declarados no meta-dado declaratons dos mudulos.

vamos criar uma classe que contem um objeto livro que contem alguns atributos como, titulo, numero de paginas, rating, data de lancamento, preco, e aplicar alguns pipes para exibir o conteudo, a sixtaxe padrao e composta pelo char pipe (

) separando a variavel do pipe.

component:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-usando-pipes-parametros-e-pipes-aninhados',
  templateUrl: './usando-pipes-parametros-e-pipes-aninhados.component.html',
  styleUrls: ['./usando-pipes-parametros-e-pipes-aninhados.component.css']
})
export class UsandoPipesParametrosEPipesAninhadosComponent implements OnInit {

  livro: any = {
    titulo: 'Typescript – Gerando O Javascript Do Futuro',
    numeroPaginas: 288,
    rating: 4.678567,
    dataLancamento: new Date(2021, 4, 3),
    preco: 71.77
  }

  constructor() { }

  ngOnInit(): void {

  }

}

template do component

<p>Exemplos de Pipes</p>
<p>Titulo: </p>
<p>Numero de Paginas: </p>
<p>Classificacao: </p>
<p>Data de lancamento: </p>
<p>Preco </p>

figura 1 - aplicacao de pipes no template

#

PIPES ANINHADOS E json PIPE

para aninhar os pipes basta separar por pipes, a ordem de execucao seguira a ordem de declaracao da esquerda para a direita. Outro pipe relevante de ser demonstrado e o json que convert um objeto em javascript para um json.

template do component

<p>Exemplos de Pipes</p>

<!-- pipes aninhados -->
<p>Titulo: </p>

<!-- json pipe -->
<p>Livro: </p>

note que no exemplo o titulo sera convertido para caixa-alta e depois para caixa-baixa.

figura 2 - pipes aninhados e json pipe