ipsos-components/src/demo-app/portal/portal-demo.html

Material Design components for Angular

<h2> The portal outlet is here: </h2>
<div class="demo-portal-outlet">
  <ng-template [cdkPortalOutlet]="selectedPortal"></ng-template>
</div>

<button type="button" (click)="selectedPortal = programmingJoke">
  Programming joke
</button>

<button type="button" (click)="selectedPortal = mathJoke">
  Math joke
</button>

<button type="button" (click)="selectedPortal = scienceJoke">
  Science joke
</button>

<!-- Template vars on <ng-template> elements can't be accessed _in_ the template because Angular
    doesn't support grabbing the instance / TemplateRef this way because the variable may be
    referring to something *in* the template (such as #item in ngFor). As such, the component
    has to use @ViewChild / @ViewChildren to get these references.
    See https://github.com/angular/angular/issues/7158 -->
<ng-template cdk-portal>
  <p> - Why don't jokes work in octal?</p>
  <p> - Because 7 10 11.</p>
</ng-template>

<div *cdk-portal>
 <p> - Did you hear about this year's Fibonacci Conference? </p>
 <p> - It's going to be as big as the last two put together. </p>
</div>