📊 Capítulo 04: Pipes Nativos & Custom Pipes

Especialização em Frontend com Angular

🗺️ O Mecanismo de Cache e Pureza dos Pipes no Angular

flowchart TD
    VAL["Entrada: {{ produto.preco | currency:'BRL':'symbol':'1.2-2' }}"]
    --> PIPE["CurrencyPipe (Pure Pipe)"]
    PIPE --> CHECK{"O valor de entrada mudou por referência (===)?"}
    CHECK -- "NÃO" --> CACHE["Retorna resultado cacheado instantaneamente! (Zero re-execução)"]
    CHECK -- "SIM" --> EXEC["transform(valor, ...args) executa e atualiza cache"]
    EXEC --> DOM["Renderiza 'R$ 1.999,90' no DOM"]

    style VAL fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style PIPE fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style CHECK fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style CACHE fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style EXEC fill:#c8e6c9,stroke:#2e7d32,stroke-width:1.5px
    style DOM fill:#00897b,stroke:#004d40,stroke-width:2px,color:#ffffff

🎯 Slide 1: Pipes Nativos Essenciais

• {{ hoje | date:'dd/MM/yyyy HH:mm' }}
• {{ 49.9 | currency:'BRL' }}
• {{ texto | uppercase | slice:0:20 }} (Encadeamento fluente!)
• {{ objeto | json }} (Depuração visual rápida)

🎯 Slide 2: Criando um Custom Pipe Standalone Puro

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

@Pipe({
  name: 'cpf',
  standalone: true,
  pure: true // Padrão: só executa se o valor bruto mudar!
})
export class CpfPipe implements PipeTransform {
  transform(valor: string): string {
    if (!valor || valor.length !== 11) return valor;
    return valor.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, '$1.$2.$3-$4');
  }
}

🎯 Slide 3: pure: true vs pure: false

• Pure Pipes: O Angular só roda a transformação quando o valor de entrada mudar por referência.

• Impure Pipes (pure: false): Executam a cada ciclo de detecção de mudanças (evite para não degradar a performance do app!).