Angular 17.1 brings new features to the framework with the introduction (as a developer preview) of Signal inputs.
What is a Signal input? š„ š¤
We are using the @Input decorator in the Angular project.
Now, we have another option, using the input() function from @angular/core.
This function creates an input value that is received as a signal. Here is an example:
export class SampleComponent {
name = input<string>('Angular');
}
Since name is a signal, it can be read like so:
<p>hello {{ name() }}</p>
We can derive a value from that input without using ngOnInit or ngOnChanges. Instead, we can use computed:
name = input<string>('Angular');
greeting = computed(() => 'Hello ' + this.name());
The new API also supports required inputs with the input.required function to ensure a value is passed to the component/directive:
export class RequiredComponent {
firstName = input<string>(); // string | undefined
lastName = input.required<string>(); // string
}
I hope you found it useful. Thanks for reading. š
Let's get connected! You can find me on:
- Medium: https://medium.com/@nhannguyendevjs/
- Dev: https://dev.to/nhannguyendevjs/
- Hashnode: https://nhannguyen.hashnode.dev/
- Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
- X (formerly Twitter): https://twitter.com/nhannguyendevjs/
- Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs
Top comments (1)
Thanks