Pipes Puros e Impuros em Angular

Os pipes podem ser de dois tipos: puros (não permitem modificações) e impuros (permitem modificações). A principal diferença entre esses dois tipos está na forma como reagem às mudanças dos valores que são passados para o pipe.

Por padrão, todos os pipes são do tipo "puro". Esses objetos monitoram alterações em valores de tipos primitivos, como String, Number, Boolean e Symbol. Em outros objetos, como Date, Array, Function e Object, as mudanças são rastreadas apenas quando a referência do objeto é alterada, e não o valor em si. Ou seja, se um elemento for adicionado a um array, o array é modificado, mas a referência da variável que representa esse array não muda. Portanto, esse tipo de alteração não é rastreado pelos pipes puros.

Agora, vamos ver um exemplo. No tema anterior, foi criada a classe FormatPipe:

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "format",
  standalone: true,
})
export class FormatPipe implements PipeTransform {
  transform(value: number, args?: any): string {
    return value.toString().replace(".", ",");
  }
}

Por padrão, este é um pipe puro. Isso significa que ele pode rastrear alterações no valor que lhe é passado, já que este é do tipo number.

No componente, poderíamos alterar dinamicamente o valor que será formatado:

import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { FormatPipe } from "./format.pipe";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [FormsModule, FormatPipe],
  template: `<input [(ngModel)]="num" name="fact" />
    <div>Resultado: {{ num | format }}</div>`,
})
export class AppComponent {
  num: number = 15.45;
}

Neste caso, não haveria problemas com a entrada de dados. Alteramos o número no campo de texto, e o resultado formatado é atualizado automaticamente.

Pipes Puros em Angular

Mas no tema anterior também foi criado outro pipe:

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "join",
  standalone: true,
})
export class JoinPipe implements PipeTransform {
  transform(array: string[], start?: number, end?: number): string {
    let result = array;
    if (start) {
      if (end) {
        result = array.slice(start, end);
      } else {
        result = array.slice(start, result.length);
      }
    }
    return result.join(", ");
  }
}

Este pipe realiza operações em um array. Portanto, se adicionarmos novos elementos dinamicamente ao array no componente, onde o JoinPipe é aplicado, não veremos as mudanças. Isso ocorre porque o JoinPipe não monitora alterações no array.

Agora, vamos torná-lo um pipe impuro. Para isso, basta adicionar o parâmetro pure: false no decorador Pipe:

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "join",
  standalone: true,
  pure: false,
})
export class JoinPipe implements PipeTransform {
  transform(array: string[], start?: number, end?: number): string {
    return array.join(", ");
  }
}

Por padrão, o parâmetro pure é igual a true.

Agora, podemos adicionar novos elementos a esse array no componente e o JoinPipe será aplicado a todos os elementos adicionados.:

import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { JoinPipe } from "./join.pipe";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [FormsModule, JoinPipe],
  template: `<input #user name="user" />
    <button (click)="users.push(user.value)">Adicionar</button>
    <p>{{ users | join }}</p>`,
})
export class AppComponent {
  users = ["Tom", "Alice", "Sam", "Kate", "Bob"];
}

Pipes Impuros em Angular

Quando um novo elemento é adicionado, a classe JoinPipe processa o array novamente. Por isso, o pipe é aplicado a todos os elementos.