hardFrontend

How does Angular's dependency resolution search work using @Self(), @SkipSelf(), @Optional(), and @Host()?

Q: How does Angular's dependency resolution search work using @Self(), @SkipSelf(), @Optional(), and @Host()?

**Core concept.** Angular's Hierarchical Dependency Injection walks up the component tree to resolve tokens. **Resolution modifiers** (decorators or parameters inside inject() ) modify this search behavior by changing where the injector starts, stops, or how it behaves when a dependency is missing. Parent Injector (SkipSelf starts here) Component Host Injector (Host stops here) Current Component Injector (Self stops here) <marker id='arrow' markerWidth='10'

250 views

Understand the problem

Explain resolution modifiers in Angular DI.

didecorators

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Using resolution modifiers in a component constructor

import { Component, Optional, Self, SkipSelf, Host } from '@angular/core';

@Injectable()
export class LoggerService {}

@Component({
  selector: 'app-sandbox',
  providers: [LoggerService],
  template: '...'
})
export class SandboxComponent {
  constructor(
    @Self() private localLogger: LoggerService,
    @SkipSelf() private parentLogger: LoggerService,
    @Host() private hostLogger: LoggerService,
    @Optional() private optionalLogger: LoggerService | null
  ) {}
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is the critical render path and how does Angular handle font and style optimization?

What is NgZone and when do you run outside Angular?