Às vezes, os pipes internos do Angular não são suficientes. Pode ser necessário realizar uma transformação única, específica para o seu aplicativo. Nesse caso, é possível criar seu próprio pipe personalizado.

Suponha que você tenha uma lista de tarefas, e cada tarefa pode estar concluída ou não. Para destacar visualmente as tarefas concluídas, você deseja adicionar automaticamente um emoji ✅ aos títulos dessas tarefas. Em vez de inserir essa lógica manualmente em cada template, você pode criar um pipe dedicado para isso.

Como Criar um Pipe Personalizado

Para gerar um pipe personalizado no Angular, utilize o seguinte comando CLI. Vamos chamá-lo de formatTitle, já que sua função é formatar o título da tarefa com base no status de conclusão:

Isso criará dois arquivos:

• format-title.pipe.ts — a lógica do pipe;

• format-title.pipe.spec.ts — um arquivo de teste unitário (você pode excluí-lo se não precisar de testes no momento).

Quando o Angular gera o pipe, ele se parece com isto:

Veja o que este código faz:

• A classe FormatTitlePipe implementa PipeTransform, o que garante que o pipe possua um método transform;

• O método transform recebe um valor (a entrada) e argumentos opcionais, retornando um resultado transformado. Neste momento, ele apenas retorna a entrada sem alterações;

• O nome do pipe (formatTitle) é definido no decorator @Pipe — este é o nome utilizado no template.

Neste estágio, o pipe existe, mas ainda não executa nenhuma função. Vamos adicionar a lógica real a seguir.

Implementação de Pipe Personalizado

É necessário adicionar um emoji ✅ ao título com base no status de conclusão da tarefa (task.completed). Atualize o pipe para aplicar nossa lógica de formatação personalizada:

O método transform recebe dois argumentos:

• value — o título da tarefa;

• completed — um valor booleano que indica se a tarefa foi concluída.

Se a tarefa estiver concluída (true), adiciona um emoji ✅ ao final do título. Caso contrário, retorna apenas o título sem alterações.

Usando o Pipe em um Template

Para utilizar o pipe em seu template Angular, aplique-o com o símbolo de pipe |:

O que está acontecendo aqui:

• task.title é o valor passado para o pipe;

• formatTitle:task.completed aplica o pipe e envia o parâmetro completed;

• O título incluirá ou não o emoji ✅, dependendo do status da tarefa.

O uso de pipes dessa forma mantém seus templates limpos e legíveis, além de transferir a lógica de formatação para um código reutilizável e testável.