Lifecycle & Projection — Series 2

Preview — 3 of 10 questions

A component queries both. Which resolves first, and what does each look at?

javascript

@Component({ selector: 'app-tabs', template: `<div class="bar"><ng-content /></div>` })
export class Tabs {
  tabs = contentChildren(TabComponent);   // what the parent put inside
  bar = viewChild<ElementRef>('bar');     // what this template declares
}

AcontentChild() looks at nodes projected into the component and resolves by ngAfterContentInit; viewChild() looks at the component's own template and resolves by ngAfterViewInit, which runs later

BBoth look at the same nodes; the names are historical

CviewChild() resolves first, because the view is created before content is projected

DcontentChild() only works with *ngFor-generated content

Where does each projected node land?

javascript

<!-- app-card template -->
<header><ng-content select="[card-title]" /></header>
<section><ng-content /></section>

ABoth nodes go to <section>, since the first slot has a selector and is skipped

BBoth nodes are duplicated into both slots

CThe <h2> goes to <header> because it matches the selector; the <p> goes to <section>, the catch-all slot

DThe order is reversed: content is projected bottom-up

Why does <ng-container> need it here?

javascript

<app-card>
  <ng-container ngProjectAs="[card-title]">
    @if (loaded()) { <h2>Hero</h2> }
  </ng-container>
</app-card>

ABecause ng-container leaves no DOM node, so it has no attributes of its own to match a slot with — ngProjectAs tells projection which selector to treat it as

BBecause @if blocks cannot be projected without it

CBecause projection ignores ng-container entirely otherwise

DBecause the card component declares it as required

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