The portals package provides a flexible system for rendering dynamic content into an application.

Portals link

A Portal is a piece of UI that can be dynamically rendered to an open slot on the page.

The "piece of UI" can be either a Component, a TemplateRef or a DOM element and the "open slot" is a PortalOutlet.

Portals and PortalOutlets are low-level building blocks that other concepts, such as overlays, are built upon.

Portal<T> link

Method	Description
attach(PortalOutlet): T	Attaches the portal to a host.
detach(): void	Detaches the portal from its host.
isAttached: boolean	Whether the portal is attached.

PortalOutlet link

Method	Description
attach(Portal): any	Attaches a portal to the host.
detach(): any	Detaches the portal from the host.
dispose(): void	Permanently dispose the host.
hasAttached: boolean	Whether a portal is attached to the host.

Portals in practice link

CdkPortal link

Used to get a portal from an <ng-template>. CdkPortal is a Portal.

Usage:

<ng-template cdkPortal>
  <p>The content of this template is captured by the portal.</p>
</ng-template>

<!-- OR -->

<!-- This result here is identical to the syntax above -->
<p *cdkPortal>
  The content of this template is captured by the portal.
</p>content_copy

A component can use @ViewChild or @ViewChildren to get a reference to a CdkPortal.

ComponentPortal link

Used to create a portal from a component type.

Usage:

ngAfterViewInit() {
  this.userSettingsPortal = new ComponentPortal(UserSettingsComponent);
}content_copy

TemplatePortal link

You can create a TemplatePortal from an <ng-template>. TemplatePortal allows you to take Angular content within one template and render it somewhere else.

Usage:

<ng-template #templatePortalContent>Some content here</ng-template>content_copy

@ViewChild('templatePortalContent') templatePortalContent: TemplateRef<unknown>;

ngAfterViewInit() {
  this.templatePortal = new TemplatePortal(
    this.templatePortalContent,
    this._viewContainerRef
  );
}content_copy

DomPortal link

You can create a DomPortal from any native DOM element. DomPortal allows you to take any arbitrary DOM content and render it somewhere else. DomPortal moves content as is, so elements with Angular features like bindings or directives may no longer update if moved via DomPortal.

Usage:

<div #domPortalContent>Some content here</div>content_copy

@ViewChild('domPortalContent') domPortalContent: ElementRef<HTMLElement>;
ngAfterViewInit() {
  this.domPortal = new DomPortal(this.domPortalContent);
}content_copy

CdkPortalOutlet link

Used to add a portal outlet to a template. CdkPortalOutlet is a PortalOutlet.

Usage:

<!-- Attaches the `userSettingsPortal` from the previous example. -->
<ng-template [cdkPortalOutlet]="userSettingsPortal"></ng-template>content_copy