À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 um 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 ponto, ele apenas retorna a entrada como está;

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

Neste momento, o pipe existe, mas ainda não executa nenhuma lógica. 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.

Utilizando o Pipe em um Template

Para utilizar o pipe em seu template Angular, aplique-o com o símbolo 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 irá incluir ou não o emoji ✅, dependendo do status da tarefa.

Utilizar 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.