hardFrontend

How do you dynamically create components?

Q: How do you dynamically create components?

**Core concept.** To instantiate a component at **runtime** (not declared in a template), use a ViewContainerRef and call vcr.createComponent(SomeComponent) — in Ivy you no longer need a component factory. You then set inputs on the returned ComponentRef and destroy it when done. The template alternative is <ng-container *ngComponentOutlet="comp"> . ViewContainerRef createComponent(Cmp) <line class='d-edge' x1='210' y1='75' x2='258' y2

454 views

Understand the problem

Explain dynamic component loading.

dynamic-components

Attempt it yourself

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

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

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
  }
}

Join the discussion

Discussion (0)

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

What is the difference between forkJoin, zip, combineLatest, and withLatestFrom?

How do you avoid memory leaks from subscriptions?