🧩 Exercícios Práticos: Pipes Nativos e Custom Pipes

Spec Frontend Com Angular • Trilha Progressiva em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 04.1 — Formatação de Moeda e Data com DatePipe e CurrencyPipe

Contexto: Formatação de Moeda e Data com DatePipe e CurrencyPipe no contexto de Pipes Nativos e Custom Pipes.

Requisitos de Execução:

  1. Formatar valor numérico como moeda brasileira {{ valor | currency:'BRL':'symbol':'1.2-2':'pt-BR' }}.

Resultado Esperado

Valor formatado como 'R$ 1.250,50' e data formatada como '29/08/2026'.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_04_1_SeuNome
  2. Envie na tarefa: Atividade Cap 04 - Pipes Nativos e Custom Pipes
🔑 Gabarito de Código & Solução Comentada 
// pipe-demo.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-pipe-demo',
  standalone: true,
  imports: [CommonModule],
  template: `
    <p>Preço: {{ 1250.5 | currency:'BRL':'symbol':'1.2-2' }}</p>
    <p>Data: {{ hoje | date:'dd/MM/yyyy' }}</p>
  `
})
export class PipeDemoComponent {
  hoje = new Date();
}

🔍 Nível 2: Prática

Problema 04.2 — Criação de Custom Pipe Puro com @Pipe({ name, pure: true })

Contexto: Criação de Custom Pipe Puro com @Pipe({ name, pure: true }) no contexto de Pipes Nativos e Custom Pipes.

Requisitos de Execução:

  1. Criar pipe CpfPipe que formate uma string de 11 dígitos no padrão 000.000.000-00.

Resultado Esperado

Pipe customizado de CPF formatando strings de forma pura.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_04_2_SeuNome
  2. Envie na tarefa: Atividade Cap 04 - Pipes Nativos e Custom Pipes
🔑 Gabarito de Código & Solução Comentada 
// cpf.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'cpf',
  standalone: true,
  pure: true
})
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');
  }
}

⚡ Nível 3: Integração

Problema 04.3 — Custom Pipe Impuro para Filtragem Dinâmica de Coleções

Contexto: Custom Pipe Impuro para Filtragem Dinâmica de Coleções no contexto de Pipes Nativos e Custom Pipes.

Requisitos de Execução:

  1. Criar pipe impuro com pure: false para filtrar listas que sofrem mutações internas.

Resultado Esperado

Lista re-filtrada a cada ciclo de detecção de mudanças.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_04_3_SeuNome
  2. Envie na tarefa: Atividade Cap 04 - Pipes Nativos e Custom Pipes
🔑 Gabarito de Código & Solução Comentada 
// filtro-impuro.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filtroNome',
  standalone: true,
  pure: false
})
export class FiltroNomePipe implements PipeTransform {
  transform(itens: any[], termo: string): any[] {
    if (!itens || !termo) return itens;
    return itens.filter(i => i.nome.toLowerCase().includes(termo.toLowerCase()));
  }
}

🏆 Nível 4: Desafio Corporativo

Problema 04.4 — Custom Async Pipe com Injeção de ChangeDetectorRef

Contexto: Custom Async Pipe com Injeção de ChangeDetectorRef no contexto de Pipes Nativos e Custom Pipes.

Requisitos de Execução:

  1. Desenvolver pipe customizado que manipule promessas e force atualização de Change Detection.

Resultado Esperado

Pipe reativo com suporte a streams assíncronas.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_04_4_SeuNome
  2. Envie na tarefa: Atividade Cap 04 - Pipes Nativos e Custom Pipes
🔑 Gabarito de Código & Solução Comentada 
// safe-async.pipe.ts
import { Pipe, PipeTransform, ChangeDetectorRef } from '@angular/core';

@Pipe({ name: 'safeAsync', standalone: true, pure: false })
export class SafeAsyncPipe implements PipeTransform {
  constructor(private cdr: ChangeDetectorRef) {}
  transform(promessa: Promise<any>): any {
    // Processamento assíncrono controlado
    return 'DADO_PROCESSADO';
  }
}