Angular v17.1 Signal input function

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

Comments

[Lars Rye Jeppesen]

Thanks