Angular
Angular

What is Portal API v2 for Dynamic Component Mounting?

March 18, 2026

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 ?

Ready to leverage the power of conversational AI? Start your project with Zignuts expert AI developers.
bg-image
download-image
Company Deck
PDF, 3MB
© 2026 Zignuts Technolab. All Rights Reserved.
branch imagesbranch imagesbranch imagesbranch imagesbranch imagesbranch images