Diga adeus aos Setters e Getters: Transform Input Values no Angular
Transforme seu código Angular para um nível superior, abandonando os tradicionais setters e getters. Saiba como simplificar ou aprimorar sua aplicação Angular.
A partir do Angular 16, foi implementado um novo recurso útil para oferecer uma abordagem alternativa e simplificada de converter valores de entrada (@inputs), dispensando o uso de métodos
getteresetter.
O decorador @input agora inclui uma opção chamada de transform, que aceita uma factory que recebe o valor de entrada passado e retorna um novo valor. Vamos considerar um exemplo:
No código acima, quando usamos o FooComponent e passamos width como string
A função toNumber manipulará a transformação, convertendo o valor da string em um número.
Outro cenário em que esse recurso é útil é ao lidar com atributos HTML. Atributos booleanos são considerados verdadeiros se estiverem presentes em um nó DOM e falsos se forem omitidos.
No entanto, o Angular interpreta todos os atributos estáticos como strings, levando a um problema comum.
Por exemplo, o código a seguir retornaria uma string vazia:
Uma maneira de solucionar essa questão é através da utilização do "transform" em vez de getters e setters.
No Angular, temos os utilitários booleanAttribute e numberAttribute disponíveis em @angular/core, os quais são frequentemente úteis em diversos projetos. Veja um exemplo prático:
No código acima, a função de transformação booleanAttribute é utilizada para lidar com a coerção booleana.
Agora, quando utilizamos o CheckboxComponent e especificamos o atributo disabled.
A função de transformação irá interpretar adequadamente a presença do atributo como "true".
Vale ressaltar que o Angular já utiliza esse recurso internamente no "router".
No geral, com a introdução da opção de transform no decorador @Input, o Angular simplifica o processo de transformar os valores de entrada, oferecendo uma abordagem mais simplificada em comparação aos métodos tradicionais de getter e setter e melhorando a perfomance de components.
Siga-me Thiago Carvalho para ler mais sobre Angular e Javascript!
