Suggest an editImprove this articleRefine the answer for “How do you avoid "props drilling" when passing state?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**"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. **Key point:** the main idea is not to drag data through unnecessary intermediaries, but to have one shared source: a service, a signal, or a store.Shown above the full answer for quick recall.Answer (EN)Image"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. ```ts @Injectable({ providedIn: 'root' }) export class ThemeService { theme = signal<'light' | 'dark'>('light'); } ``` Now both the parent and the grandchild simply inject this service: ```ts 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.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.