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

Material Design components for Angular

<button (click)="openRotiniPanel()">
  Pasta 1
</button>

<button (click)="openFusilliPanel()">
  Pasta 2
</button>

<button cdk-overlay-origin (click)="openSpaghettiPanel()">
  Pasta 3
</button>

<button cdk-overlay-origin #tortelliniOrigin="cdkOverlayOrigin" (click)="openTortelliniPanel()">
  Pasta 4
</button>


<button cdk-overlay-origin #trigger="cdkOverlayOrigin" (click)="isMenuOpen = !isMenuOpen">
  Open menu
</button>

<ng-template cdk-connected-overlay [origin]="trigger" [width]="500" hasBackdrop [open]="isMenuOpen"
  (backdropClick)="isMenuOpen=false">
  <div style="background-color: mediumpurple" >
    This is the menu panel.
  </div>
</ng-template>

<!-- Template to load into an overlay. -->
<ng-template cdk-portal>
  <p class="demo-fusilli"> Fusilli </p>
</ng-template>

<ng-template cdk-portal #tortelliniTemplate="cdkPortal">
  <ul class="demo-tortellini"><li *ngFor="let filling of tortelliniFillings">{{filling}}</li></ul>
</ng-template>

<button (click)="openPanelWithBackdrop()">Backdrop panel</button>

<button (click)="openKeyboardTracking()">Keyboard tracking</button>