Angular: @Input() vs input()

@Input() Decorator

The @Input decorator allows parent components to pass data to their children.

Example of @Input

//Parent component:
<app-child [userName]="name"></app-child>//Parent component:
<app-child [userName]="name"></app-child>

//Child Component:
import {Component, Input} from '@angular/core';

@Component({
   selector: 'app-child',
   template: `<p>Welcome, {{userName}}</p>`
})

export class ChildComponent {
   @Input() userName: string = 'Default User';
}

In this example child component binds userName with @Input(). This works seamlessly for small-scale scenarios.

Modern input() Signals

Angular 16 introduc

//Parent component:
<app-child [userName]="name"></app-child>//Parent component:
<app-child [userName]="name"></app-child>

//Child Component:
import {Component, input} from '@angular/core';

@Component({
   selector: 'app-child',
   template: `<p>Welcome, {{userName()}}</p>`
})

export class ChildComponent {
   userName =  input<string>('Default User');
}

Why Use input() Over @Input()?