Services and helpers

The services, functions and types that bootstrap-ng exports besides its components.

BsToaster

Shows toasts from code, without a toast in your template. The toasts stack in a fixed .toast-container that is added to the page the first time a toast is shown.

import { Component, inject } from '@angular/core';
import { BsButton, BsToaster } from 'bootstrap-ng';

@Component({
  selector: 'app-save',
  imports: [BsButton],
  template: `<button type="button" bsButton theme="primary" (click)="save()">Save</button>`,
})
export class Save {
  private readonly toaster = inject(BsToaster);

  protected save(): void {
    this.toaster.show({ title: 'Saved', body: 'Your changes were saved.' });
  }
}

Name	Type	Description
`show(options)`	`BsToastRef`	Shows a toast and returns a reference with hide() and afterHidden.
`clear()`	`void`	Hides every toast.
`setPlacement(placement)`	`void`	Where the toasts stack on the screen. Defaults to 'bottom-end'.

See Toasts for every option, themes and templates with actions.

BsLiveAnnouncer

Reads a message out to screen reader users through visually hidden live regions that stay on the page. Use it for changes that happen without moving focus, such as search results updating. Toasts and the carousel already announce through it.

import { Component, inject, signal } from '@angular/core';
import { BsLiveAnnouncer } from 'bootstrap-ng';

@Component({ … })
export class Search {
  private readonly announcer = inject(BsLiveAnnouncer);
  protected readonly results = signal<string[]>([]);

  protected search(query: string): void {
    // …
    this.announcer.announce(`${this.results().length} results found`);
  }
}

Name	Type	Description
`announce(message, politeness?)`	`void`	Reads the message out. Politeness is 'polite' (the default) or 'assertive', which interrupts the screen reader and is meant for errors.
`clear()`	`void`	Clears pending and current announcements.

See Accessibility for why a region that stays on the page is announced more reliably than one added with its text.

BsIconRegistry

The icon libraries that bs-icon loads from, and a cache of the icons it has loaded. bootstrap (the default), modus, font-awesome and material are built in and load from jsDelivr. Set the default library and add your own with provideBsIcons(), or self-host a built-in set by passing a baseUrl to its factory, such as bootstrapIcons(), modusIcons(), fontAwesomeIcons() or materialSymbols().

import { ApplicationConfig } from '@angular/core';
import { bootstrapIcons, provideBsIcons } from 'bootstrap-ng';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBsIcons({
      // Icons without a library come from Font Awesome.
      defaultLibrary: 'font-awesome',
      libraries: {
        // Serve Bootstrap Icons from your own site, copied from node_modules/bootstrap-icons/icons.
        bootstrap: bootstrapIcons({ baseUrl: '/icons/bootstrap' }),
        // Any icon set with an SVG file per icon.
        lucide: {
          resolver: (name) => `https://cdn.jsdelivr.net/npm/[email protected]/icons/${name}.svg`,
        },
      },
    }),
  ],
};

Name	Type	Description
`register(name, library)`	`void`	Adds an icon library, or replaces the one with the same name.
`get(name)`	`BsIconLibrary \| undefined`	Returns the library registered under the name.
`load(url)`	`Promise<SVGSVGElement>`	Fetches an SVG once, removes scripts and event handlers, and returns a copy.
`defaultLibrary`	`WritableSignal<string>`	Name of the library that icons without a library use.

See Icon for every built-in library and its variants.

Helper functions

bootstrap-ng uses these internally. They are exported for components that you build on top of it.

Name	Type	Description
`themeClass(theme)`	`string`	Returns the .theme-* class for a BsTheme, such as 'theme-danger', or an empty string when the theme is null.
`waitForTransition(element)`	`Promise<void>`	Resolves when the element's CSS transition ends, at once when it has none, and after a fallback timer if transitionend never fires.
`getTransitionDuration(element)`	`number`	The element's first transition duration plus delay, in milliseconds.
`uniqueId(prefix)`	`string`	Returns an id that is unique on the page, such as 'bs-collapse-3'.

For example, to emit an event after a fade-out finishes, as bootstrap-ng's own hidden and closed outputs do:

protected async close(): Promise<void> {
  this.element.classList.remove('show');
  await waitForTransition(this.element);
  this.closed.emit();
}

Types

Name	Type	Description
`BsTheme`	`string union`	'primary' \| 'accent' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'inverse' \| 'secondary'
`BsPlacement`	`string union`	Where a tooltip, popover or menu opens: 'top', 'bottom', 'left', 'right', 'start' or 'end', optionally followed by '-start' or '-end'.

BOOTSTRAP_NG

An array of every component and directive, to add to a component's imports while prototyping. Import single components in production code so unused ones are removed from your bundle. See Conventions.