Angular v17.1 Signal input function

#programming #angular #signal

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:

Top comments (1)

Thanks