portals package provides a flexible system for rendering dynamic content into an application.
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
Portals and PortalOutlets are low-level building blocks that other concepts, such as overlays, are built upon.
||Attaches the portal to a host.|
||Detaches the portal from its host.|
||Whether the portal is attached.|
||Attaches a portal to the host.|
||Detaches the portal from the host.|
||Permanently dispose the host.|
||Whether a portal is attached to the host.|
Portals in practice
Used to get a portal from an
CdkPortal is a
<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
@ViewChildren to get a reference to a
Used 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
this.userSettingsPortal = new ComponentPortal(UserSettingsComponent);
Used to add a portal outlet to a template.
CdkPortalOutlet is a
<!-- Attaches the `userSettingsPortal` from the previous example. --> <ng-template [cdkPortalOutlet]="userSettingsPortal"></ng-template>