The portals package provides a flexible system for rendering dynamic content into an application.
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 or a TemplateRef 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>| 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| 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. |
CdkPortalUsed 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>
A component can use @ViewChild or @ViewChildren to get a reference to a CdkPortal.
ComponentPortalUsed to create a portal from a component type. When a component is dynamically created using portals, it must be included in the entryComponents of its NgModule.
Usage:
this.userSettingsPortal = new ComponentPortal(UserSettingsComponent);
CdkPortalOutletUsed 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>