Não devemos usar métodos no HTML a menos que estejam associados a eventos:

Isso tem o problema de ser executado várias vezes. No exemplo, está sendo mapeado um array que será executado 16 vezes. Da mesma forma, não devemos usar solicitações get ou API diretamente.

Isso pode ser resolvido usando um pipe e/ou criando um pipe personalizado, que será executado apenas uma vez para cada usuário. Neste exemplo, o pipe possui um método transform que recebe os mesmos argumentos do método usado anteriormente:

Explicação:

O problema com os métodos surge porque eles não são nativos do Angular, então o Angular não sabe quando seu valor foi alterado. Como resultado, ele avalia constantemente os métodos para alterações após cada pequena atualização.

Em contraste, um pipe é nativo, puro e só é executado quando seus argumentos mudam. Além disso, um pipe pode ser reutilizado em diferentes partes da aplicação (ao contrário de um método, que só pode ser reutilizado enviando-o para um serviço).

Podemos criar um pipe se ele não existir, especificando seu local de destino:

ng g p pipes/fullName (onde pipes/fullName é o local).

O pipe é criado como uma classe que implementa PipeTransform, uma interface que exige que tenhamos um método de transformação. Este método é executado quando o pipe é executado e funciona como um método normal. Para usar o pipe criado, devemos importá-lo para o componente do aplicativo (autônomo):

Ao utilizá-lo no HTML, chamamos-o pelo nome indicado no campo nome do pipe, utilizando o símbolo ‘|’ seguido do nome do pipe. O primeiro argumento é passado para a esquerda, e se quisermos passar outros argumentos, eles são passados ​​para a direita, após dois pontos ‘:’:

Lembre-se de boas práticas: se houver muitos argumentos, é melhor usar um objeto. Como boa prática, tente não abusar dos canos para evitar entupimentos. Divida o código e você terá sucesso.

Para criar o conteúdo do pipe, especificamos os argumentos que queremos receber e o tipo de retorno no método transform. Então, escrevemos o conteúdo e retornamos o resultado. Valores opcionais podem ser recebidos prefixando-os com um ‘?’, e valores padrão podem ser atribuídos usando ‘=’.

— Notas baseadas no curso Angular da EfisioDev —