A signal-first, zoneless-ready Angular component library built on Bootstrap 5.3 — from form primitives to a full dock manager, scheduler, and ribbon.
input() / model() / output() / computed() — no RxJS Subjects on public surfaces.provideZonelessChangeDetection(). Every component uses ChangeDetectionStrategy.OnPush.NgModules on public exports — bare classes you can drop straight into your imports: [...].<bs-theme-toggle>, a signal-based BsThemeService and a cookie the server renders. See the Theming guide.@mintplayer/ng-bootstrap/theming — each component is its own secondary entry point.bs-theme-mode cookie, and a generated pre-boot script applies it before the first paint on prerendered and cached pages, so dark-mode users never see a light flash. Install the package — npm 7+ pulls in bootstrap, bootstrap-icons, @angular/cdk, lit, and the other peer dependencies automatically:
npm install @mintplayer/ng-bootstrap
Then wire the library's compiled Bootstrap bundle into the styles array of your application's angular.json:
{
"projects": {
"your-app": {
"architect": {
"build": {
"options": {
"styles": [
"node_modules/@mintplayer/ng-bootstrap/bootstrap.scss",
"src/styles.scss"
]
}
}
}
}
}
}
Alternatively, @forward it from your styles.scss when you want to override Bootstrap's SCSS variables ($primary, $body-bg, …) before the import:
// Optional: override Bootstrap 5.3 SCSS variables BEFORE the import.
$primary: #ff5722;
@forward '@mintplayer/ng-bootstrap/bootstrap';
Beyond the Bootstrap-shaped basics, the library ships a handful of components that would otherwise be heavy third-party dependencies in their own right.
Day / week / month calendar with drag-drop event editing, ARIA-keyboard navigation, and signal-driven data binding. Built on Lit 3 internally.
See the demo →VS Code-style splittable, draggable panel manager with same-layer splitter intersection glyphs.
See the demo →Microsoft-style command surface — nine item kinds, quick-access toolbar, touch mode.
See the demo →Windowless push-and-reflow tiling layout. Alternative to dock for dashboard shells.
See the demo →CDK virtual-scroll-backed table with pagination, selection, and resizable columns; one signal-driven data contract.
See the demo →Visual builder for nested AND/OR queries — full operator catalog with relative-date and array ops, drag-and-drop, sub-queries, custom value editors. Emits a canonical JSON tree the backend translates server-side.
See the demo →Light / dark / auto plus custom variants like sepia: a drop-in toggle, a signal-based service and a cookie the server renders, with no flash on reload.
See the demo →A minimal standalone component using the alert, button-type, and theming packages together:
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { Color } from '@mintplayer/ng-bootstrap';
import { BsAlertComponent } from '@mintplayer/ng-bootstrap/alert';
import { BsButtonTypeDirective } from '@mintplayer/ng-bootstrap/button-type';
import { BsThemeService } from '@mintplayer/ng-bootstrap/theming';
@Component({
selector: 'app-root',
template: `
<bs-alert [type]="colors.info">
Current theme: <strong>{{ theme.effectiveMode() }}</strong>
</bs-alert>
<button [color]="colors.primary" (click)="theme.setMode('dark')">
Switch to dark
</button>
`,
imports: [BsAlertComponent, BsButtonTypeDirective],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
protected readonly colors = Color;
protected readonly theme = inject(BsThemeService);
}