Services, DI & Communication

Angular Input Property

@Input marks a component property as settable by its parent through property binding. It is how data flows down the component tree.

What is Input Property in Angular?

@Input marks a component property as settable by its parent through property binding. It is how data flows down the component tree.

Input Property example

Declaring and receiving inputs

TypeScript

@Component({ selector: 'app-job-card', standalone: true, templateUrl: './job-card.component.html' })
export class JobCardComponent {
  @Input({ required: true }) job!: Job;
  @Input() showApplyButton = true;
  @Input('badge') badgeText?: string;   // external name differs
}

Passing values in

HTML

<app-job-card [job]="selectedJob" [showApplyButton]="false" badge="New" />

Key points to remember

required: true makes Angular fail the build when the input is missing.
Use the definite assignment assertion (!) since Angular sets the value after construction.
A static string can be passed without brackets; anything else needs them.
The signal-based input() function is the modern alternative in recent versions.

Common mistakes with Input Property

Reading an @Input in the constructor, where it is still undefined.
Mutating an input object, which surprises the parent and breaks OnPush.

Angular Input Property— Interview Questions & FAQs

When is an @Input value available?+

After the first ngOnChanges, so from ngOnInit onward. The constructor runs before Angular assigns any input.