What does the @Input() decorator do?

AngularJunior~1 min read

The @Input() decorator in Angular is used to pass data from a parent component to a child.

How it works:

In the child component, a property is marked with @Input().
The parent component can pass a value through the selector attribute of the child component.

Example:

typescript

// Child component
@Component({
  selector: 'app-child',
  template: `<p>{{ message }}</p>`
})
export class ChildComponent {
  @Input() message: string;
}

// Parent component
@Component({
  selector: 'app-parent',
  template: `<app-child [message]="'Hello, world!'"></app-child>`
})
export class ParentComponent {}

Conclusion: @Input() creates a top-down data connection, allowing the parent to control the state of the child component.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.