Page History

Inputs as signals

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Introduction

Angular signals provide a reactive way to handle state in applications. This new approach offers better performance optimization and cleaner code.

Example

This example shows how to use them as inputs with the old version of the Input decorator.

Signals can be used as inputs using the classic Input decorator until they are passed out of the developer preview.  

@Component(...)
class Component {
    @Input({ alias: 'example' }) 
    set value(value: unknown) { 
        this.demo.set(value); 
    }
    demo = signal<unknown | undefined>(undefined);
}

Once Angular team release inputs as signals we can easily refactor our code to  

@Component(...)
class Component {
     demo = input<unknown | undefined>(undefined);
}

and all HTML templates where a component is used can remain unchanged due to the alias.

Conclusion

This approach allows us to use inputs as signals earlier.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------