Dynamic Components — Series 2

Preview — 3 of 10 questions

What does this give MenuItem, and what does the parent template have to add?

javascript

@Component({
  selector: 'app-menu-item',
  standalone: true,
  hostDirectives: [{ directive: CdkTrapFocus, inputs: ['cdkTrapFocus: trapFocus'] }],
  template: `<ng-content />`,
})
export class MenuItem {}

ANothing at runtime — hostDirectives is a documentation hint

BThe directive is applied to every element inside the template

CCdkTrapFocus is applied to MenuItem's own host element automatically, with its input re-exposed as trapFocus — callers write <app-menu-item trapFocus> and never import the directive

DThe parent must still import CdkTrapFocus and add it to the element

How do you render a component chosen at runtime and pass it inputs, without touching ViewContainerRef?

javascript

<ng-container
  *ngComponentOutlet="widgetFor(kind); inputs: { hero: hero() }; injector: customInjector" />

A<ng-container *ngComponentOutlet="cmp; inputs: { hero: hero() }" /> — the outlet creates the component and applies the inputs, updating them when the object changes

BNgComponentOutlet cannot pass inputs; only createComponent can

CBy binding [inputs] on the component's own selector

DBy providing the values through DI and injecting them in the dynamic component

What does let-hero bind to?

javascript

this.vcr.createEmbeddedView(this.tpl, { $implicit: hero, index: 3 });

AThe component instance, with index ignored

Bundefined — context keys must match the variable names exactly

CThe template's own #tpl reference

DThe value under $implicit, because a bare let-x binds the implicit context slot; let-i="index" binds the named key

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