Pipes Puros e Impuros - 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.

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"];
}

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