Hierarchical Injectors — Series 2

Preview — 3 of 10 questions

A component provides Theme and also injects it with skipSelf. What does it get?

javascript

@Component({ providers: [Theme] })
export class Panel {
  private parentTheme = inject(Theme, { skipSelf: true });
}

AIts own Theme, since skipSelf only affects child components

Bnull

CThe Theme from the nearest ancestor injector — its own provider is deliberately skipped, which is how a component wraps or extends the value its parent supplies

DA new instance, unrelated to any provider

What does { self: true } change?

javascript

// Only valid on an element that also has NgControl
private control = inject(NgControl, { self: true, optional: true });
if (!control) throw new Error('appMask requires a form control on the same element');

AIt looks only in the current injector and throws (or returns null when optional) instead of walking up the chain

BIt returns the component instance itself

CIt forces a new instance to be created locally

DIt restricts the lookup to the root injector

Where does the lookup stop with { host: true }?

javascript

@Directive({ selector: '[appTabLabel]' })
export class TabLabel {
  private tabs = inject(TabGroup, { host: true });   // the group I was projected into
}

AAt the root injector

BIt never stops; host is an alias for the default behaviour

CAt document.body

DAt the host element of the current view — so a directive on projected content resolves against the component that projected it, not further up the tree

Answer all 10 questions (7 more), see explanations for every answer, and track your score.