Angular 17.1 Delivers Signal Inputs

Angular 17.1 shipped as scheduled, bringing Signal Inputs as its headline capability.

With this feature, components receive their input values as Signals. The @Input decorator is replaced by a function called input. Developers can now respond to value changes through computed, effect, or by reading the Signal value directly.

The API offers three distinct options:

  • Using input with a default value produces a Signal of a specific type.
  • Using input without a default value requires a generic type argument, and the resulting type is a union that includes undefined.
  • The input.required variant also demands a generic type but returns a type without the undefined union. However, input.required can trigger a runtime error if the Signal value is accessed before the component initializes — for instance, inside the constructor.

The feature also supports transformation functions for type mapping and parameter binding from the router.

Experimental Web Test Runner Support

The web test runner is now available in experimental mode for testing purposes. This replaces Karma, which executes Jasmine tests within the browser. Jasmine itself will remain in use.

To switch to the Web Test Runner, follow these steps:

  • Install the dependency by running npm install @web/test-runner –save-dev.
  • In the angular.json file, change the builder in the architect.test.builder path from "@angular-devkit/build-angular:karma" to "@angular-devkit/build-angular:web-test-runner".
  • Execute ng test.

Further details can be found in the commit description: "https://github.com/angular/angular-cli/commit/68dae539adfa12d6088f96ac5c9f224d9bb52e17"

Zoneless Change Detection Preview

There has been speculation about zoneless application support. Zone.js can be disabled in favor of a new scheduler that triggers change detection in markForCheck. This function activates during async pipe subscriptions, handled DOM events, immutable input property changes, or Signal updates.

To enable this new scheduler, include ɵprovideZonelessChangeDetection() in the providers property of the bootstrapApplication call.

Currently, the scheduler is an internal feature. It should only be used by those willing to work with cutting-edge functionality.

Community Migration Tooling

The ngUpdate command will not handle migration to Signal Inputs. That said, a community-developed migrator by Chau Tran is available:

ngxtension.dev