How do you avoid "props drilling" when passing state?
"Props drilling" is when you pass data through a chain of intermediate components that don't use that data themselves, but are forced to pass it further down. In Angular, this can be avoided in several ways.
1. A shared service
The most common option:
create a service that holds the shared state (through a signal or BehaviorSubject),
and every component that needs it gets access through DI.
@Injectable({ providedIn: 'root' })
export class ThemeService {
theme = signal<'light' | 'dark'>('light');
}Now both the parent and the grandchild simply inject this service:
constructor(private theme: ThemeService) {}2. Using inject() and signals in local zones
If state is only needed inside a specific branch, you can create a feature service,
provided through providers in the parent component.
Then it will be shared only within that branch, not across the whole application.
3. A state management library
For large projects - NgRx, NGXS, Akita, and so on. State is centralized there, so no more "passing it down" is needed.
4. Content projection / ViewProviders
Sometimes you can avoid passing data at all by simply designing the component differently - so that it knows itself where to get what it needs, instead of waiting for it "from above".
Conclusion:
The main idea is not to drag data through unnecessary intermediaries.
A single shared source (a service, a signal, a store) is better
than five levels of @Input and @Output that everything has to pass through.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.