Pipes em Angular

Em Angular, os pipes permitem transformar dados diretamente no template antes de serem exibidos ao usuário. Os pipes são uma parte fundamental do Angular e são usados para formatar e exibir dados de maneira mais amigável e legível.

Principais Características dos Pipes:

Uso no Template:

• Os pipes são utilizados diretamente no template, dentro das interpolações {{ }} ou em diretivas que aceitam transformações, como o ngFor.

Sintaxe:

• A sintaxe básica para utilizar um pipe é adicionar o nome do pipe após o valor a ser transformado, separado por um caractere de barra (|).

  {{ value | pipeName }}
  

Pipe Date como Exemplo:

• Um exemplo comum é o uso do pipe date para formatar datas:

  {{ myDate | date: 'dd/MM/yyyy' }}
  

Principais Pipes

Angular fornece uma série de pipes pré-definidos para tarefas comuns. Veja uma lista:

Nome	O que faz	Como usar
date	Formata uma data de acordo com um formato especificado.	{{ myDate
uppercase	Transforma os caracteres de uma string em maiúsculo .	{{ textValue
lowercase	Transforma os caracteres de uma string em minúsculo.	{{ textValue
currency	Formata um valor para um tipo de moeda	{{ priceValue
json	Faz o stringify de um dado e o mostra em json	{{ infoValue
async	Faz o subscribe de um observable e mostra em tempo real os dados desse obervable	{{ obervable$

Pipes Personalizados

Para criar um pipe, precisa ser criado uma classe decorada com @Pipe e o nome do pipe, a classe precisa implementar PipeTransform que terá um método transform que vai receber o value que é o dado que vai passar no pipe e o factor caso precise passar algum parâmetro para esse pipe. Suponha que você tenha um pipe personalizado chamado customMultiplier que multiplica um número por um fator específico.

// Definindo o pipe personalizado
@Pipe({ name: 'customMultiplier' })
export class CustomMultiplierPipe implements PipeTransform {
  transform(value: number, factor: number): number {
    return value * factor;
  }
}

Uso no template:

{{ 5 | customMultiplier: 2 }} <!-- Resultado: 10 -->

Pipes encadeados

Você também pode encadear vários pipes para realizar várias transformações:

{{ myDate | date | uppercase }}

Neste exemplo, primeiro a data é formatada usando o pipe date e, em seguida, é convertida para maiúsculas usando o pipe uppercase.