BottomSheet

Usage

The application owns open. Bind it and handle closeRequested by applying false when closing is accepted. opened and closed report lifecycle transitions, not replacement values for open. Project body content and the available header/footer slots. Keep a named trigger in the page so focus can return after dismissal. disableClose only blocks automatic dismissals; provide an explicit completion action.

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

<button neu-button (neuClick)="open.set(true)">
  {{ t("Open example", "Abrir ejemplo") }}</button
><neu-bottom-sheet
  [open]="open()"
  [size]="'md'"
  [disableClose]="false"
  [closeLabel]="'Close'"
  (closeRequested)="open.set(false); record('closeRequested', $event)"
  (opened)="record('opened')"
  (closed)="record('closed')"
  [title]="'Review changes'"
><p>
    {{
      t(
        "Review the content, then close to return to the trigger.",
        "Revisa el contenido y cierra para regresar al activador."
      )
    }}
  </p>
  <button neu-button variant="outline" (neuClick)="open.set(false)">
    {{ t("Done", "Terminar") }}
  </button></neu-bottom-sheet
>

import { signal } from '@angular/core';

export const open = signal(false);

State and events

The application owns open. Bind it and handle closeRequested by applying false when closing is accepted. opened and closed report lifecycle transitions, not replacement values for open. Project body content and the available header/footer slots. Keep a named trigger in the page so focus can return after dismissal. disableClose only blocks automatic dismissals; provide an explicit completion action.

Accessibility and keyboard

Tab remains in a modal surface. Escape requests dismissal when enabled. Closing returns focus to the original trigger; persistent Sidebar is normal page navigation rather than a modal task.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Public Types

Open a type to inspect its definition and interface fields.

import type { NeuBottomSheetSize } from '@neural-ui/core/bottom-sheet';

// Public declaration (reference only)
export type NeuBottomSheetSize = 'sm' | 'md' | 'lg' | 'full';

import type { NeuCloseReason } from '@neural-ui/core/foundation';

// Public declaration (reference only)
export type NeuCloseReason = 'escape' | 'outside' | 'action' | 'programmatic-command';

import type { NeuCloseReason } from '@neural-ui/core/foundation';

import type { NeuCloseRequest } from '@neural-ui/core/foundation';

// Public declaration (reference only)
export interface NeuCloseRequest {
  readonly originalEvent?: Event;
  readonly reason: NeuCloseReason;
}

Styles and tokens

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

Related components

Use related components when your task requires a different interaction or a composed control.

• Dialog
• Sidebar
• ConfirmDialog