Global configuration

Set default values for component inputs once, for the whole app or for part of it.

Overview

Each component with inputs that apps commonly set the same way everywhere, such as tooltip placement, the carousel interval or a translated label, has a provideBs*Config() function. Add it to your application's providers to change the defaults of every instance:

import { ApplicationConfig } from '@angular/core';
import { provideBsDialogConfig, provideBsTableConfig, provideBsTooltipConfig } from 'bootstrap-ng';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBsDialogConfig({ backdrop: 'static' }),
    provideBsTableConfig({ hover: true, emptyText: 'Nothing here yet' }),
    provideBsTooltipConfig({ placement: 'bottom', delay: 300 }),
  ],
};

An input you set on a component always wins over the configuration, and options you leave out keep their built-in defaults. Components read their configuration when they are created, so set it before they render, not while the app is running.

For part of an app

The same functions work in a component's or a route's providers. Components in that part of the app use those defaults, merged over the app's own, so you only list what changes:

import { Component } from '@angular/core';
import { BsTooltip, provideBsTooltipConfig } from 'bootstrap-ng';

@Component({
  selector: 'app-toolbar',
  imports: [BsTooltip],
  // Tooltips in this toolbar open below it, with the app's delay.
  providers: [provideBsTooltipConfig({ placement: 'bottom' })],
  templateUrl: './toolbar.html',
})
export class Toolbar {}

Popups that services create, such as dialogs from BsDialogService and toasts from BsToaster, use the app's configuration, and the options you pass when opening them win over it. The calendar that a datepicker opens also uses the app's calendar configuration.

Calendars and datepickers

Calendars and datepickers format dates in Angular's LOCALE_ID unless you give them a locale. Datepickers use the calendar configuration too, so one provideBsCalendarConfig() sets the locale, first day of the week and week numbers of both. Use provideBsDatepickerConfig() for datepicker-only options, or to set the shared ones differently for datepickers:

import { ApplicationConfig } from '@angular/core';
import { provideBsCalendarConfig, provideBsDatepickerConfig } from 'bootstrap-ng';

export const appConfig: ApplicationConfig = {
  providers: [
    // Every calendar and datepicker: weeks start on Sunday, with week numbers.
    provideBsCalendarConfig({ firstWeekday: 0, weekNumbers: true }),
    // Datepickers only: show the selected date as "March 5, 2026".
    provideBsDatepickerConfig({ dateFormat: { dateStyle: 'long' } }),
  ],
};

See Internationalization for locales and the labels to translate.

Configuration functions

Each function takes some of the inputs of its component, with the same names and types. Each configuration also has an interface, such as BsAlertConfig, and an injection token, such as BS_ALERT_CONFIG, for components of your own that want to read it.

Icons have their own setup: set the default icon library and add libraries with provideBsIcons().