Dynamic component loading in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when dynamically loading a component with Angular signals?

Consider an Angular standalone component that uses signals to dynamically load another component into a . What will be the rendered output if the signal controlling the component type changes?

Angular

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-dynamic-loader',
  standalone: true,
  template: `
    <ng-container *ngIf="currentComponent() as comp">
      <ng-container *ngComponentOutlet="comp"></ng-container>
    </ng-container>
    <button (click)="toggle()">Toggle Component</button>
  `
})
export class DynamicLoaderComponent {
  private compA = class {
    static ɵcmp = { selectors: [['comp-a']], template: function() { document.write('Component A Loaded'); } };
  };
  private compB = class {
    static ɵcmp = { selectors: [['comp-b']], template: function() { document.write('Component B Loaded'); } };
  };

  currentComponent = signal(this.compA);

  toggle() {
    this.currentComponent.set(this.currentComponent() === this.compA ? this.compB : this.compA);
  }
}

A Both components render simultaneously inside the container.

B The component does not render anything because signals cannot be used with *ngComponentOutlet.

C Clicking the button causes a runtime error because the component classes are not registered.

D Initially 'Component A Loaded' is shown. Clicking the button switches the output to 'Component B Loaded'.

💡 Hint

Think about how signals update reactive values and how *ngComponentOutlet uses the current component reference.

The signal currentComponent holds the class of the component to load. Initially, it is compA, so 'Component A Loaded' is rendered. When the button is clicked, the signal updates to compB, causing Angular to load and render 'Component B Loaded'. Signals work well with Angular's reactive templates, so the dynamic component updates correctly.

📝 Syntax

intermediate

Which option correctly uses Angular 17+ inject() to dynamically load a component?

Given Angular 17+ with standalone components and inject(), which code snippet correctly injects a ViewContainerRef to load a component dynamically?

A

const vcr = inject(ViewContainerRef);
vcr.createComponent(MyComponent);

B

const vcr = new ViewContainerRef();
vcr.createComponent(MyComponent);

C

const vcr = inject(MyComponent);
vcr.createComponent(ViewContainerRef);

D

const vcr = inject(ViewContainerRef);
vcr.loadComponent(MyComponent);

💡 Hint

inject() is used to get Angular dependencies, not to create new instances with new.

Option A correctly uses inject(ViewContainerRef) to get the container reference and then calls createComponent() to load the component dynamically. Option A incorrectly uses new which is not allowed for Angular dependencies. Option A injects the wrong token. Option A calls a non-existent method loadComponent.

🔧 Debug

advanced

Why does this dynamic component loading code cause a runtime error?

Analyze the following Angular code snippet that tries to load a component dynamically but throws an error at runtime. What is the cause?

Angular

import { Component, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-host',
  template: `<ng-template #container></ng-template>`
})
export class HostComponent {
  @ViewChild('container', { read: ViewContainerRef }) container!: ViewContainerRef;

  ngAfterViewInit() {
    this.container.createComponent(SomeComponent);
  }
}

@Component({
  selector: 'app-some',
  template: `<p>Some works!</p>`
})
export class SomeComponent {}

A SomeComponent is not declared in any NgModule or standalone, so Angular cannot resolve it.

B The ViewChild query is missing { static: true }, causing container to be undefined.

C createComponent requires a factory, not the component class directly.

D ngAfterViewInit runs too early; dynamic loading should be in ngOnInit.

💡 Hint

Check if the component being loaded is properly registered or standalone.

Angular needs the component to be declared in an NgModule or marked as standalone to create it dynamically. Since SomeComponent is neither declared nor standalone, Angular throws a runtime error when trying to create it.

❓ state_output

advanced

What is the output after toggling dynamic components twice?

Given this Angular component that toggles between two dynamically loaded components on button click, what will be the output after clicking the toggle button twice?

Angular

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-toggle',
  standalone: true,
  template: `
    <ng-container *ngComponentOutlet="current()"></ng-container>
    <button (click)="toggle()">Toggle</button>
  `
})
export class ToggleComponent {
  comp1 = class {
    static ɵcmp = { selectors: [['comp-1']], template: function() { document.write('First Component'); } };
  };
  comp2 = class {
    static ɵcmp = { selectors: [['comp-2']], template: function() { document.write('Second Component'); } };
  };

  current = signal(this.comp1);

  toggle() {
    this.current.set(this.current() === this.comp1 ? this.comp2 : this.comp1);
  }
}

A After two toggles, both components are displayed simultaneously.

B After two toggles, 'First Component' is displayed again.

C After two toggles, 'Second Component' remains displayed.

D After two toggles, the component container is empty.

💡 Hint

Think about how toggling twice switches the component back to the original.

The toggle method switches the current component between comp1 and comp2. Starting with comp1, one toggle switches to comp2, the second toggle switches back to comp1. So after two toggles, 'First Component' is displayed again.

🧠 Conceptual

expert

Which statement best describes Angular's dynamic component loading with standalone components and signals?

Select the statement that accurately explains how Angular 17+ supports dynamic component loading using standalone components and signals.

A Signals cannot be used with dynamic component loading; only ViewContainerRef.createComponent is supported.

B Dynamic component loading requires NgModules to declare components; standalone components cannot be loaded dynamically.

C Signals can hold component classes, and templates using *ngComponentOutlet reactively update when the signal changes, enabling seamless dynamic loading without NgModules.

D Angular requires manual change detection calls after dynamic component loading with signals to update the view.

💡 Hint

Consider Angular's move towards standalone components and reactive primitives like signals.

Angular 17+ allows signals to hold component classes. When used with *ngComponentOutlet, the template updates reactively as the signal changes. This removes the need for NgModules in many dynamic loading scenarios, simplifying the process.