Dynamic Components — Series 3

Preview — 3 of 10 questions

The container already has three components rendered. What does index: 0 do?

javascript

this.container.createComponent(AlertComponent, { index: 0 });

AIt has no effect; createComponent always appends at the end regardless of this option

BIt sets AlertComponent's own internal state to 0

CIt inserts the new component's view at position 0 in the container — ahead of the three existing views — rather than appending it after them, letting callers control ordering among dynamically created siblings instead of always adding to the end

DIt replaces whatever is currently at position 0, destroying the existing view there

When user$ emits a new value, does the view update, even though no @Input() changed?

javascript

@Component({ changeDetection: ChangeDetectionStrategy.OnPush, ... })
class UserCardComponent {
  user$ = this.api.getUser();
}

AYes — AsyncPipe internally calls ChangeDetectorRef.markForCheck() on the host component whenever its source observable emits, which is exactly the signal OnPush needs to know this component should be re-checked — no manual markForCheck() call is required from application code

BNo — under OnPush, only @Input() reference changes or DOM events on the component itself can trigger a re-check

COnly if the component also implements DoCheck

DOnly if user$ is converted to a signal with toSignal() first

What does the document: prefix in 'document:click' do, and what happens when this directive's host element is destroyed?

javascript

@Directive({ selector: '[appClickOutside]' })
export class ClickOutsideDirective {
  @HostListener('document:click', ['$event'])
  onDocumentClick(event: MouseEvent) {
    if (!this.el.nativeElement.contains(event.target)) {
      this.closed.emit();
    }
  }
}

Adocument: has no special meaning; it's purely documentation in the string

Bdocument:click restricts the listener to only click events that bubble up from inside this directive's own element — the prefix is required for that

CThe document: prefix tells Angular to attach the listener to the global document object instead of the directive's own host element — useful for "click outside" style detection — and Angular automatically removes that listener when the directive is destroyed, exactly as it would for a listener on the host element itself

DThe prefix attaches the listener to document, but the listener is never automatically cleaned up — you must call document.removeEventListener yourself in ngOnDestroy

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