@open-rlb/ng-bootstrap

Angular component library built on Bootstrap 5.3 (signals, OnPush), with timezone-aware date handling via @open-rlb/date-tz. Requires Angular 22 (>=22.0.0 <23.0.0).

Installation

Recommended — ng add

ng add @open-rlb/ng-bootstrap

The schematic will:

• install the required dependencies (bootstrap, bootstrap-icons, @open-rlb/date-tz, @ngx-translate/core, @angular/cdk, and @types/bootstrap) at compatible versions;
• register the Bootstrap, Bootstrap Icons and CDK overlay stylesheets in angular.json;
• add provideRlbBootstrap() to your application providers;
• scaffold a RlbStarterComponent (src/app/rlb-starter/) you can render to verify the setup (pass --skip-starter to opt out);
• copy the bundled Claude skills into .claude/skills/ — date-tz plus the rlb-* component guides (pass --skip-skills to opt out).

Manual

npm install @open-rlb/ng-bootstrap

When installed this way, npm pulls the declared peer dependencies automatically (npm 7+). Then register the providers and styles yourself:

// app.config.ts
import { provideRlbBootstrap } from '@open-rlb/ng-bootstrap';

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

// angular.json → projects.<app>.architect.build.options.styles
"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "node_modules/@angular/cdk/overlay-prebuilt.css",
  "src/styles.scss"
]

Upgrading from a version before the CDK overlay move? Add that third line by hand. ng add registers it for a new install, but it does not run again when you bump the version — and it is what positions every panel the library opens: dropdowns, tooltips, popovers, the datepicker, the time picker, the tree select, the popconfirm and the command palette. Without it the overlay container has no position of its own and they all open in the corner of the page.

Usage

<rlb-card>
  <rlb-card-header>Hello</rlb-card-header>
  <rlb-card-body>
    <button rlb-button color="primary">Click me</button>
  </rlb-card-body>
</rlb-card>

Development

• npm run lib:build — builds the library and its ng-add schematics into dist/rlb/ng-bootstrap.
• npm run lib:test:ng-add — runs an isolated, in-memory check of the ng-add schematic (requires a prior lib:build).
• npm run lib:pack — builds and packs a publishable tarball.

Publishing

npm run lib:build
cd dist/rlb/ng-bootstrap
npm publish