Dynamic Components — ComponentRef, ViewContainerRef and CDK Portal

Dynamic components are created and destroyed programmatically at runtime rather than declared statically in templates. Use cases include toast notification systems (dynamically create and remove notification components), modal systems (programmatically create dialog content), and plugin architectures (load components based on configuration). Angular provides ViewContainerRef.createComponent() for programmatic component creation and Angular CDK’s Portal system for rendering components in overlay containers.

Dynamic Component Creation #

import { Component, ViewContainerRef, ComponentRef,
         ViewChild, inject, signal, Type } from '@angular/core';

// ── Dynamic toast notifications ────────────────────────────────────────────
@Component({
  selector:   'app-toast-notification',
  standalone:  true,
  template: `
    <div class="toast" [class]="'toast-' + type">
      <mat-icon>{{ icon }}</mat-icon>
      <span>{{ message }}</span>
      <button mat-icon-button (click)="dismiss()">
        <mat-icon>close</mat-icon>
      </button>
    </div>
  `,
})
export class ToastNotificationComponent {
  message = '';
  type:    'success' | 'error' | 'info' = 'info';
  icon     = 'info';
  dismiss  = () => {};   // set by the creating service
}

// ── Toast service — dynamically creates notification components ───────────
@Injectable({ providedIn: 'root' })
export class ToastService {
  private container?: ViewContainerRef;
  private toasts: ComponentRef<ToastNotificationComponent>[] = [];

  // Must call this once in AppComponent
  setContainer(container: ViewContainerRef): void {
    this.container = container;
  }

  show(message: string, type: 'success' | 'error' | 'info' = 'info',
       duration = 4000): void {
    if (!this.container) return;

    const ref = this.container.createComponent(ToastNotificationComponent);

    // Set @Input values on the dynamic component
    ref.setInput('message', message);   // Angular 14+: setInput() for inputs
    ref.instance.type    = type;
    ref.instance.icon    = type === 'success' ? 'check_circle'
                         : type === 'error'   ? 'error'
                         : 'info';
    ref.instance.dismiss = () => this.dismiss(ref);

    this.toasts.push(ref);
    ref.changeDetectorRef.detectChanges();  // trigger initial render

    setTimeout(() => this.dismiss(ref), duration);
  }

  private dismiss(ref: ComponentRef<ToastNotificationComponent>): void {
    const idx = this.toasts.indexOf(ref);
    if (idx >= 0) {
      ref.destroy();              // destroys the component and removes from DOM
      this.toasts.splice(idx, 1);
    }
  }
}

// ── AppComponent — provides the container ─────────────────────────────────
@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <ng-container #toastContainer />  <!-- mount point for dynamic toasts ── -->
    <router-outlet />
  `,
})
export class AppComponent implements AfterViewInit {
  @ViewChild('toastContainer', { read: ViewContainerRef })
  toastContainer!: ViewContainerRef;
  private toastService = inject(ToastService);

  ngAfterViewInit(): void {
    this.toastService.setContainer(this.toastContainer);
  }
}

// ── CDK Portal — for overlay-based dynamic components ─────────────────────
// import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
// import { Overlay } from '@angular/cdk/overlay';
//
// const overlayRef = this.overlay.create({ positionStrategy: ... });
// const portal     = new ComponentPortal(MyDialogComponent);
// const ref        = overlayRef.attach(portal);
// ref.instance.title = 'My Dialog';

Common Mistakes #

Mistake 1 — Not calling componentRef.destroy() on dismissal (memory leak) #

❌ Wrong — removing the component from the DOM manually without calling destroy(); component stays alive in memory.

✅ Correct — always call ref.destroy() to clean up the component, its subscriptions, and its DOM nodes.

Mistake 2 — Setting @Input via instance property instead of setInput() (skips input pipeline) #

❌ Wrong — ref.instance.title = 'Hello' for a signal-based input(); signal inputs require setInput().

✅ Correct — always use ref.setInput('title', 'Hello') for @Input() and input() properties.