Angular Academy · Aula

Criando pipes personalizados

Crie pipes de transformação reutilizáveis.

Criando pipes personalizados é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Por que usar pipes personalizados?

Quando os pipes integrados não são suficientes, você pode criar um pipe personalizado para encapsular uma lógica de transformação reutilizável nos seus templates.

O decorador @Pipe

Um pipe é uma classe decorada com @Pipe. A propriedade name é o nome que você usa nos templates.

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

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe {}

Implementando PipeTransform

Uma classe de pipe implementa a interface PipeTransform, que exige um único método transform.

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

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
  transform(value: string): string {
    return value + "!";
  }
}

O método transform

O primeiro parâmetro de transform é o valor processado pelo pipe. Tudo o que você retornar se tornará a saída renderizada.

transform(value: string): string {
  return value.trim();
}

Usando seu pipe

Importe o pipe para um componente independente e depois use o nome dele no template, assim como faria com um pipe integrado.

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [ExclaimPipe],
  template: "<p>{{ 'hi' | exclaim }}</p>"
})
export class DemoComponent {}
// renders: hi!

Aceitando argumentos

Os parâmetros adicionais depois de value tornam-se argumentos do pipe. Quem o chama passa esses argumentos usando dois-pontos.

@Pipe({ name: "repeat", standalone: true })
export class RepeatPipe implements PipeTransform {
  transform(value: string, times: number): string {
    return value.repeat(times);
  }
}
// {{ "ab" | repeat:3 }} -> ababab

Valores padrão para argumentos

Defina valores padrão para os argumentos para que quem chama o pipe possa omiti-los. Isso mantém o pipe flexível.

transform(value: string, times: number = 2): string {
  return value.repeat(times);
}
// {{ "ab" | repeat }} -> abab

Lidando com Null e Undefined

Sempre trate entradas ausentes. Retorne uma alternativa adequada quando o valor for nulo ou indefinido.

transform(value: string | null): string {
  if (value == null) return "";
  return value.toUpperCase();
}

Exemplo de um pipe de truncamento

Aqui está um pipe prático que encurta textos longos e acrescenta reticências.

@Pipe({ name: "truncate", standalone: true })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 20): string {
    if (!value) return "";
    return value.length > limit
      ? value.slice(0, limit) + "..."
      : value;
  }
}

Definindo o tipo de retorno

Anote o tipo de retorno para manter a segurança de tipos no TypeScript e nos seus templates. Um pipe pode retornar qualquer tipo, não apenas strings.

@Pipe({ name: "double", standalone: true })
export class DoublePipe implements PipeTransform {
  transform(value: number): number {
    return value * 2;
  }
}

Registrando em um módulo (NgModule)

Se você usar NgModules em vez de componentes independentes, declare o pipe em declarations e exporte-o, se necessário.

@NgModule({
  declarations: [TruncatePipe],
  exports: [TruncatePipe]
})
export class SharedModule {}

Verificação rápida

Teste sua compreensão sobre pipes personalizados.

Recapitulação

Você criou um pipe personalizado com @Pipe e PipeTransform, aceitou argumentos com valores padrão, tratou valores nulos e registrou o pipe em componentes independentes ou NgModules.

A seguir, você aprenderá sobre pipes puros e impuros.

Perguntas Frequentes

A aula “Criando pipes personalizados” é grátis?

Sim — o texto completo de “Criando pipes personalizados” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Criando pipes personalizados”?

Crie pipes de transformação reutilizáveis. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Criando pipes personalizados”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy