How do you pass state between a parent and a child component?
State between a parent and a child component is passed through @Input and @Output - the standard communication mechanism in Angular.
1. Passing down - through @Input
The parent gives data to the child:
ts
// parent template
<app-child [count]="parentCount"></app-child>ts
// in the child component
@Input() count!: number;2. Passing up - through @Output and EventEmitter
The child component notifies the parent about changes:
ts
// in the child component
@Output() increment = new EventEmitter<void>();
someMethod() {
this.increment.emit();
}html
<!-- parent subscribes to the event -->
<app-child (increment)="handleIncrement()"></app-child>3. An alternative - a shared service
If components are hard to connect directly (or sit deeper in the hierarchy), you can use a shared service with a signal, BehaviorSubject, or store.
Conclusion:
- @Input - to give a value
- @Output - to get a reaction
- a shared service - when you need to share state across multiple levels or branches of the component tree.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.