Sign in
Skip to solution
hardFrontend

How do you dynamically create components?

454 views
01

Understand the problem

Explain dynamic component loading.

dynamic-components
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Use a ViewContainerRef and call createComponent(MyComponent) (modern API) to instantiate a component at runtime and insert it into the view. Useful for modals, dynamic dashboards, and rendering components chosen at runtime.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Create and configure a component at runtime
import { Component, ViewChild, ViewContainerRef, AfterViewInit } from '@angular/core';

@Component({ selector: 'app-widget', standalone: true, template: '<b>{{ title }}</b>' })
export class WidgetComponent { title = ''; }

@Component({
  selector: 'app-root',
  standalone: true,
  template: '<ng-container #host></ng-container>',
})
export class AppComponent implements AfterViewInit {
  @ViewChild('host', { read: ViewContainerRef }) host!: ViewContainerRef;

  ngAfterViewInit() {
    const ref = this.host.createComponent(WidgetComponent); // instantiate
    ref.setInput('title', 'Created at runtime');            // pass input
    // ref.destroy();  // when finished → cleanup
  }
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 104 of 121 decoded in the Angular track. One more won't hurt.

Back to track