Portal
Usage
A portal
gives you the ability to "teleport" a template to a different part of the UI while keeping its context where it is defined. It is similar to content projection, only much more dynamic. You are not bound to render it as a child of the component you want to render the template into, rather you can render it anywhere in the UI that you want.
Setup
The Portal mechanism is done with the help of two directives: goPortalAttachTo
and goPortalTarget
. Both directives take a string binding that is used to connect the two templates. The strings must match in order for the portal to work.
Apply the goPortalAttachTo
directive to the template that you want to "port", and the goPortalTarget
directive on the destination where you want the "ported" template to render into.
Example
Specify the template for the
goPortalAttachTo
directive.<ng-template goPortalAttachTo="enterprise"> <span id="kirk">Beam me up, Scotty!</span> </ng-template>
Then, specify the destination via the
goPortalTarget
directive.<!-- elsewhere in the UI... --> <div class="starship"> <ng-container goPortalTarget="enterprise"></ng-container> </div>
The first template will render in the place that the second template is declared.