Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

Bottom Sheet

The Bottom Sheet service opens a temporary panel attached to the bottom edge of the screen. Use it to show supplementary actions or choices while keeping the user in the current page context, especially in mobile and responsive interfaces.

Use it for:
  • Action lists: Present share, open with, quick actions, or object-specific options.
  • Mobile choices: Show compact selections from the bottom of the viewport.
  • Temporary panels: Open a component or template without navigating away.
  • Data and results: Pass data into the sheet and return a result when it is dismissed.

Do not use Bottom Sheet for full modal flows, confirmations, long forms, side detail panels, small anchored menus, or persistent navigation. Use Dialog, Confirm, Drawer, Side Panel, Menu, Popover, Sidebar, or Sidenav for those cases.

BottomSheet Service

MethodReturns
open(componentOrTemplateRef, config?)
Opens a bottom sheet containing the given component or template.
BottomSheetRef<T, R>
dismiss(result?)
Dismisses the currently-visible bottom sheet.
void

BottomSheetConfig

PropertyTypeDefault
viewContainerRef
The view container to place the overlay for the bottom sheet into.
ViewContainerRef
panelClass
Extra CSS classes to be added to the bottom sheet container.
string | string[]
data
Data being injected into the child component.
anynull
hasBackdrop
Whether the bottom sheet has a backdrop.
booleantrue
disableClose
Whether the user can use escape or clicking outside to close the bottom sheet.
booleanfalse
autoFocus
Where the bottom sheet should focus on open.
string | booleanfirst-tabbable
height
Height for the bottom sheet.
string''