Server-side rendering

Use bootstrap-ng with server-side rendering, prerendering, hydration and zoneless change detection.

Server-side rendering and prerendering

bootstrap-ng works with Angular's server-side rendering and build-time prerendering. Add them to an application with the Angular CLI:

ng add @angular/ssr

Components render Bootstrap's markup, classes and ARIA attributes on the server, so the page is styled and readable before JavaScript loads. Work that needs a browser, such as measuring elements, positioning popups, opening a <dialog>, moving focus or starting a carousel, runs in afterNextRender() or afterRenderEffect(), which Angular skips on the server.

So anything that needs the browser, such as a modal dialog's backdrop and focus trap, starts once the page hydrates.

Hydration

bootstrap-ng supports full hydration and needs no ngSkipHydration. Enable it with event replay, so that clicks made before the page hydrates are not lost:

import { ApplicationConfig } from '@angular/core';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
  providers: [provideClientHydration(withEventReplay())],
};

This site prerenders every page and hydrates it with this configuration, so each component page is a working example.

Browser-only code in your application

BsToaster and BsLiveAnnouncer add elements to the document body. Call them from event handlers, or wrap calls that run on load in afterNextRender(), so they don't run on the server:

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

@Component({ … })
export class Welcome {
  private readonly toaster = inject(BsToaster);

  constructor() {
    // Runs in the browser only, after the first render.
    afterNextRender(() => {
      this.toaster.show({ body: 'Welcome back!' });
    });
  }
}

The same applies to your own use of localStorage, matchMedia or window, for example when you save the color mode. See Switching modes for how to apply a saved mode before a prerendered page paints.

Zoneless change detection

bootstrap-ng does not need zone.js. Components keep their state in signals, so they update with zoneless change detection, which is the default for new Angular applications. The library's tests and this site run without zone.js. Applications that still use zone.js work as well.