menu

Portal

Usage

content_copy

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

  1. Specify the template for the goPortalAttachTo directive.

    <ng-template goPortalAttachTo="enterprise"> <span id="kirk">Beam me up, Scotty!</span> </ng-template>
  2. Then, specify the destination via the goPortalTarget directive.

    <!-- elsewhere in the UI... --> <div class="starship"> <ng-container goPortalTarget="enterprise"></ng-container> </div>
  3. The first template will render in the place that the second template is declared.