O que é um Pipe Angular

Pipe nos ajuda a transformar dados que estão em um formato para outro. Eles são chamados assim pois usa o “|” para chamá-lo.

Vamos imaginar que queremos que o formato de nosso calendário na aplicação seja o seguinte DD/MM/YYYY e por padrão o JavaScript “Date()” é de outra forma.

Uma forma muito simples de lidar com isso é usando o Pipe e a sintaxe ficaria desta forma.

<p>{{ date | date: 'd/M/y' }}</p>

Que nos retornará o seguinte:

28/04/2022

Quer saber mais sobre o Angular? Acompanhe o Blog e o meu curso => Aqui

Como usar Pipes

Vamos dar uma rápida olhada em como é a sintaxe do pipe que é seguida dos dados e depois a estrutura.

{{ dados| estrutura}}

E como estamos no Angular ele nos fornece vários recursos já prontos para trabalhar com pipes, vamos dar uma olhada:

Json pipe;
Lowercase pipe;
Uppercase pipe;
Async pipe;
Titlecase pipe;
Date pipe;
Currency pipe;
Percent pipe;
Decimal pipe;
Slice pipe.

Pipes são fáceis de usar e de combinar entre si, vamos dar um exemplo de como funcionaria.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
  public title = "Pequeno teste para os títulos e pipes";
  public date = new Date();
  public pi = 3.14159265359;
 
  public jsonObj = {
    nome: 'Dener',
    sobrenome: 'Troquatte',
    idade: 30,
    endereco: {
      a1: 'São Paulo',
      a2: 'Brasil'
    }
  };
 
  public diasSemana = ['Segunda','Terça','Quarta','Quinta','Sexta','Sabado','Domingo'];
}

No exemplo acima temos vários tipos de dados, desde arrays, strings, números, json.

Agora vamos colocar ele na estrutura HTML e mostrar em tela o resultado.

<h2>Uppercase pipe</h2>
<p>{{ title | uppercase }}</p>

<h2>Lowercase pipe</h2>
<p>{{ title | lowercase }}</p>

<h2>Titlecase pipe</h2>
<p>{{ title | titlecase }}</p>

<h2>Datas</h2>
<p>{{ date | date }}</p>

<h2>Datas</h2>
<p>(d/M/y): {{ date | date: 'd/M/y' }}</p>
<p>(dd/MM/yy): {{ date | date: 'dd/MM/yy' }}</p>
<p>(d/MM/y): {{ date | date: 'd/MM/y' }}</p>

<h2>Datas</h2>
<p>{{ date | date: 'shortTime' }}</p>

<h2>JSON pipe</h2>
<p>(No transform): {{ jsonObj }}</p>
<p>{{ jsonObj | json }}</p>

<p>(2:5): {{ diasSemana  | slice: 2:5 }}</p>
<p>(1:3): {{ diasSemana  | slice: 1:3 }}</p>
<p>(0): {{ diasSemana  | slice: 0 }}</p>

<ul>
  <li *ngFor="let diasSemana of diasSemana  | slice:2">{{ diasSemana }}</li>
</ul>

Vimos no exemplo acima que o Angular nos permite manipular os dados de forma incrível com os pipes.

Os Pipes também podem ser usados com Promise ou Observable e retornar o último valor emitido.

Quando o componente é destruído o Pipe automaticamente faz o unsubscribe para evitar memory leak.

Vamos ver um exemplo onde criaremos uma Promise chamada “nome”.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
  public nome: Promise<string|null>;
}

Depois vamos criar um método que chamaremos de “getNome()” que atribui um texto ao objeto depois de 3 segundos de forma assíncrona.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
 
  nome: Promise<string|null>;
 
  getNome(): Promise<string> {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("Dener Troquatte")
      }, 3000)
    })
  }
}

Depois vamos atribuir o objeto nome ao construtor.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent {
  public nome: Promise<string|null>;
 
  public getNome(): Promise<string> {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("Dener Troquatte")
      }, 3000)
    })
  }
 constructor() {
    this.nome = this.getNome();
 }
}

Antes de completar os 3 segundos o “nome” é uma Promise do tipo null e depois de 3 segundos ele se torna uma Promise do tipo string com um texto dentro.

<p>{{ nome | async }}</p>

Como uma boa prática, vamos deixar uma mensagem de carregando, assim o usuário não fica sem saber o que está acontecendo dentro da aplicação.

<!-- Podemos usar uma ternary expression -->
<p>{{ (nome | async) ? (nome | async) : "Espere..." }}</p>
 
<!-- Ou podemos usar um ngIf else-->
<p *ngIf="nome | async; else loading">{{ nome | async }}</p>
 
<ng-template #loading>
  <p>Loading...</p>
</ng-template>

Como criar um Pipe customizado

Para não surpreender ninguém, o CLI nos permite adiantar o processo de criar um Pipe.

Ng generate pipe nome_do_pipe

Então vamos criar o nosso querido pipe com o nome de “sqrt” (que significa square (quadrado) em inglês), vamos usar o nome em inglês por conta do método que irá calcular um quadrado.

Ng g p sqrt

Até aqui sem novidades, irá criar os dois arquivos o “.spec” e o “.ts”.

O arquivo “.ts” do nosso Pipe irá parecer com algo assim.

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({
  name: "sqrt”
})
export class SqrtPipe implements PipeTransform {
 
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

O Angular requer que usemos o transform() para alocar a nossa lógica dentro dele.

Vamos usar somente um tipo o Number, então podemos remover o resto.

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({
  name: "sqrt”
})
export class SqrtPipe implements PipeTransform {
 
  public transform(value: number): number{
    return null;
  }
}

Depois vamos criar nossa lógica dentro do Transform().

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({
  name: “sqrt”
})
export class SqrtPipe implements PipeTransform {
 
  public transform(value: number): number{
      Return Math.sqrt (value);
  }
}

Então vamos usar o nosso pipe dentro do componente.

<p>{{ 25 | sqrt}}</p>
<p>{{ 100 | sqrt}}</p>
<p>{{ 175068 | sqrt}}</p>

Então podemos ver a saída e os valores em tela.

O que é um Pipe Angular