Getting started
From zero to a working Angular 21 app with a TeqBench-powered banner in under five minutes.
01
Authenticate with GitHub Packages
The @teqbench scope ships through GitHub Packages, not npmjs. Add a scoped registry entry and a read:packages PAT to your .npmrc.
# .npmrc
@teqbench:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NPM_TOKEN}02
Install the severity theme foundation
Every severity-aware component depends on the theme package. Install it first; component packages peer-depend on it.
npm install @teqbench/tbx-mat-severity-theme03
Provide the theme at bootstrap
Wire the provider in your application config. `invert: false` keeps the default colored-background palette.
import { bootstrapApplication } from '@angular/platform-browser';
import { provideTbxMatSeverityTheme } from '@teqbench/tbx-mat-severity-theme';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, {
providers: [
provideTbxMatSeverityTheme({ invert: false }),
],
});04
Show your first banner
Inject the banner service anywhere, call one of the severity methods, done. Fire-and-forget by default.
import { TbxMatBannerService } from '@teqbench/tbx-mat-banners';
private readonly banner = inject(TbxMatBannerService);
void this.banner.success('Welcome to TeqBench.');