Toasts

Lightweight notifications that hide on their own, pausing while the pointer or focus is inside them.

Bootstrap’s toasts docs describe the markup and CSS.

Example

Call show() on the toast. Wrap toasts in a positioned .toast-container. bsToastClose hides the parent toast.

Hello, world! This is a toast message.

HTML

<button type="button" bsButton theme="primary" (click)="toast.show()">Show toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div bsToast #toast="bsToast">
    <div class="toast-header">
      <strong class="me-auto">bootstrap-ng</strong>
      <small>just now</small>
      <button type="button" bsCloseButton bsToastClose></button>
    </div>
    <div class="toast-body">Hello, world! This is a toast message.</div>
  </div>
</div>

Always open

Set open and [autohide]="false" to keep a toast on the page until it is closed.

This toast stays until you close it.

HTML

<div bsToast open [autohide]="false">
  <div class="toast-header">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-body-secondary">11 mins ago</small>
    <button type="button" bsCloseButton bsToastClose></button>
  </div>
  <div class="toast-body">This toast stays until you close it.</div>
</div>

Stacking

Render toasts from a list and remove each one on hidden. The container spaces them out.

<button type="button" bsButton theme="primary" (click)="add()">Add a toast</button>

<div class="toast-container position-fixed top-0 end-0 p-3">
  @for (message of messages(); track message.id) {
    <div bsToast open [delay]="4000" (hidden)="remove(message.id)">
      <div class="toast-header">
        <strong class="me-auto">Notification #{{ message.id }}</strong>
        <button type="button" bsCloseButton bsToastClose></button>
      </div>
      <div class="toast-body">{{ message.text }}</div>
    </div>
  }
</div>

From code

Inject BsToaster and call show() to show a toast without writing its markup. The toasts stack in a fixed container at the bottom end of the screen; change it with setPlacement(). The body can be text or a template, which gets the toast as context so it can hide itself.

<div class="hstack gap-2 flex-wrap">
  <button type="button" bsButton theme="primary" (click)="save()">Save</button>
  <button type="button" bsButton theme="danger" (click)="fail()">Fail</button>
  <button type="button" bsButton="outline" theme="secondary" (click)="archive()">Archive</button>
  <button type="button" bsButton="outline" theme="secondary" (click)="toaster.clear()">
    Clear all
  </button>
</div>

<ng-template #undo let-toast>
  Message archived.
  <div class="hstack gap-2 mt-2">
    <button type="button" bsButton size="sm" theme="primary" (click)="toast.hide()">Undo</button>
  </div>
</ng-template>

API

BsToast

Selector: [bsToast] · Exported as: bsToast

Inputs

Name	Type	Default	Description
`open`	`boolean`	`false`	Whether the toast is shown. Supports [(open)].
`autohide`	`boolean`	`true`	Hides the toast after delay.
`delay`	`number`	`5000`	Milliseconds before the toast hides.
`live`	`'polite' \| 'assertive'`	`'polite'`	How urgently screen readers read the toast out when it opens. Use assertive for errors. The text goes through BsLiveAnnouncer, because screen readers often miss a live region that appears with its text.
`animation`	`boolean`	`true`	Fades the toast in and out.

Outputs

Name	Type	Description
`openChange`	`boolean`	Emits when the toast opens or closes from inside.
`shown`	`void`	Emits after the toast is shown.
`hidden`	`void`	Emits after the toast is hidden.

Methods

Name	Type	Description
`show()`	`void`	Shows the toast.
`hide()`	`void`	Hides the toast.
`toggle()`	`void`	Toggles the toast.
`isOpen`	`Signal<boolean>`	Current open state.

BsToastClose

Selector: [bsToastClose]

BsToaster

Selector: inject(BsToaster)

Methods

Name	Type	Description
`show(options)`	`BsToastRef`	Shows a toast. Options: body (string or template), title, subtitle, theme, autohide, delay, live and closeLabel. The returned ref has hide() and an afterHidden promise.
`setPlacement(placement)`	`void`	Where the toasts stack: 'top-start', 'top-center', 'top-end', 'bottom-start', 'bottom-center' or 'bottom-end' (the default).
`clear()`	`void`	Hides every toast.