Angular

What is Portal API v2 for Dynamic Component Mounting?

March 18, 2026

download ready
Thank You
Your submission has been received.
We will be in touch and contact you soon!

Portal API v2 enables mounting Angular components across DOM boundaries, app contexts, or even micro-frontends without hydration mismatches. It creates detachable "portals" of components/templates that can be rendered in remote DOM locations while preserving Angular lifecycle, signals, and change detection.

Code

import { Component, ComponentRef, Injectable, ViewContainerRef } from '@angular/core';
import { ComponentPortal, DomPortalOutlet } from '@angular/cdk/portal';

@Injectable({ providedIn: 'root' })
export class PortalService {
  mountWidget(container: HTMLElement, WidgetComponent: any) {
    // Create portal from component
    const portal = new ComponentPortal(WidgetComponent);
    
    // Create outlet in remote DOM
    const outlet = new DomPortalOutlet(
      container, 
      this.cfr, 
      this.appRef, 
      this.injector
    );
    
    // Mount and return reference
    return outlet.attach(portal);
  }

  constructor(
    private cfr: ComponentFactoryResolver,
    private appRef: ApplicationRef,
    private injector: Injector
  ) {}
}

// Usage in any component:
widgetRef: ComponentRef<Widget> = this.portalService.mountWidget(
  document.getElementById('plugin-slot')!, 
  UserWidgetComponent
);
      
Hire Now!

Need Help with Angular Development ?

Work with our skilled angular developers to accelerate your project and boost its performance.
**Hire now**Hire Now**Hire Now**Hire now**Hire now

What is Portal API v2 for Dynamic Component Mounting?

Portal API v2 enables mounting Angular components across DOM boundaries, app contexts, or even micro-frontends without hydration mismatches. It creates detachable "portals" of components/templates that can be rendered in remote DOM locations while preserving Angular lifecycle, signals, and change detection.

Code

import { Component, ComponentRef, Injectable, ViewContainerRef } from '@angular/core';
import { ComponentPortal, DomPortalOutlet } from '@angular/cdk/portal';

@Injectable({ providedIn: 'root' })
export class PortalService {
  mountWidget(container: HTMLElement, WidgetComponent: any) {
    // Create portal from component
    const portal = new ComponentPortal(WidgetComponent);
    
    // Create outlet in remote DOM
    const outlet = new DomPortalOutlet(
      container, 
      this.cfr, 
      this.appRef, 
      this.injector
    );
    
    // Mount and return reference
    return outlet.attach(portal);
  }

  constructor(
    private cfr: ComponentFactoryResolver,
    private appRef: ApplicationRef,
    private injector: Injector
  ) {}
}

// Usage in any component:
widgetRef: ComponentRef<Widget> = this.portalService.mountWidget(
  document.getElementById('plugin-slot')!, 
  UserWidgetComponent
);