Angular 17.1: Signal Input chegou!

Angular 17.1 foi lançada e com essa versão algo muito legal e, também, muito esperado por toda a comunidade finalmente chegou para o framework.

Sim! Estamos falando da funcionalidade chamada Signal Input.

Nesse artigo será mostrado a razão dessa funcionalidade existir e como usar a mesma.

Caso você goste mais do formato em vídeo, temos o seguinte conteúdo no nosso canal no Youtube:

O que é Signal Input?

Essa funcionalidade permite com que usemos a tradicional Input dos componentes e diretivas do Angular de uma forma um pouco diferente da maneira como você provavelmente já conhece.

A ideia é poder receber valores da mesma forma como você já faz hoje, mas com um pequeno adição. O valor recebido vai estar encapsulado dentro de um Signal.

Com essa mudança, o framework consegue se integrar ainda mais com essa nova API de reativade de Signal e chegar mais próximo da tão sonhada integração completa, que removerá a necessidade da utilização da biblioteca ZoneJS nas aplicações Front-End.

O que muda no código?

Apesar de essa adição ao framework não provocar quebras nos projetos existentes, essa nova forma de declarar uma Input gera algumas mudanças em como você vai estruturar seu código.

Anteriormente a configuração de uma Input em um componente poderia ser feita da seguinte forma:

@Component({
  ...
})
export class NameComponent {
  @Input() name: string;
}

Com a chegada de Signal Input, o código acima mudou um pouco.

Confira no trecho de código logo abaixo:

@Component({
  ...
})
export class NameComponent {
  name = input<string>();
}

Notou a diferença?

Não é mais necessário utilizar o decorator @Input para declarar uma propriedade como uma Input.

Agora a função input(…) faz isso por você.

Como usar a função input()?

Essa nova função utiliza na verdade a mesmas funcionalidades que o Decorator @Input.

Assim, a função input(…) traz como melhoria melhor rastreamento de tipos e maior poder de verificação por parte do framework.

Confira a seguir alguma das funcionalidades dessa nova abordagem.

Aplicando tipagem explícita para uma Input

Diferente do uso de decorators, através do uso de funções é possível definir explitamente que tipo de valor uma Input poderá receber.

Por exemplo, no código abaixo a Input apenas permite receber valores do tipo string.

export class ExampleComponent {
	optionalInput = input<string>()
}

E caso essa tipagem não seja respeitada, um erro por parte do framework é lançado.

No código abaixo é passado um valor do tipo number para uma Input do tipo string.

<example-component [optionalInput]="45" />

O erro que o Angular lançara no terminal será:

NG2: Type 'number' is not assignable to type 'string'

Definindo uma Input como opcional

A função input por padrão é opcional, não obrigando com que os componentes ou diretivas passem valores para a mesma.

Veja na linha abaixo como definir uma input opcional.

export class ExampleComponent {
	optionalInput = input()
}

É interessante notar que é possível definir um valor padrão para a Input, que será usado quando nenhum valor ser passado pelo componente pai.

export class ExampleComponent {
	optionalInput = input('default value')
}

Definindo uma Input obrigatória

A possibilidade de definir uma Input obrigatória dentro do Angular já não uma novidade tão recente, mas uma melhoria importante foi adicionada com a função input()

Agora é possível definir uma Input como obrigatória apenas utilizando o código abaixo:

export class ExampleComponent {
	requiredInput = input.required()
}

E caso um valor não seja passado para a Input, um erro irá acontecer instanteneamente pelo Angular.

[ERROR] NG8008: Required input 'requiredInput' from component ExampleComponent must be specified.

Legal, né?

Ficou bem mais estrita essa verificação.

Adicionando configurações para uma Input

A adição de configurações para uma Input confinua a mesma, apenas mudando como definimos esses dados.

Quando a Input é obrigatória, as configurações são passadas no primeiro e único parâmetro da função.

myRequiredInput = input.required({
	transform: (v) => v.toUpperCase(),
	alias: 'fakeName'
})

Mas quando a função é opcional, configurações são passadas no segundo parâmetro.

myInput = input('', {
	transform: (v) => v.toUpperCase(),
	alias: 'fakeName'
})

Conclusão

Signal Inputs é uma funcionalidade que marca um passo importante em relação a integração do Angular com Signals.

Essa nova forma de definir Inputs traz uma melhor experiência de tipagem ao código e também torna o fluxo dos dados mais explícito.