Bottom Sheet

MatBottomSheet displays contextual information as a panel anchored to the bottom of the screen.

Basic Bottom Sheet

Open a bottom sheet with a list of actions using MatBottomSheet service and a template.

HTML

<button mat-raised-button color="primary" (click)="openBottomSheet()">Open Bottom Sheet</button>

<ng-template #bottomSheetTemplate>
  <mat-nav-list>
    <a mat-list-item (click)="closeBottomSheet()">
      <mat-icon matListItemIcon>share</mat-icon>
      <span matListItemTitle>Share</span>
    </a>
    <a mat-list-item (click)="closeBottomSheet()">
      <mat-icon matListItemIcon>link</mat-icon>
      <span matListItemTitle>Copy link</span>
    </a>
  </mat-nav-list>
</ng-template>