bs-alert renders a Bootstrap contextual feedback banner with a two-way [(visible)] binding. dismissible adds a close button (named by closeLabel) that hides the alert and moves focus to the next control; announce opts in to role="alert" for dynamic alerts.
<bs-alert color="info" [(visible)]="isVisible" dismissible>
Heads up — something noteworthy happened.
</bs-alert>
import { Component } from '@angular/core';
import { Color } from '@mintplayer/ng-bootstrap';
import { BsAlertComponent } from '@mintplayer/ng-bootstrap/alert';
@Component({
selector: 'my-alert-demo',
templateUrl: './my-alert-demo.component.html',
imports: [BsAlertComponent],
})
export class MyAlertDemoComponent {
protected readonly colors = Color;
protected isVisible = true;
}
<!-- Stack of static, dismissible alerts -->
<bs-alert color="warning" [(visible)]="alert1Visible" dismissible>
Heads up.
</bs-alert>
<bs-alert color="danger" [(visible)]="alert2Visible" dismissible>
Something went wrong.
</bs-alert>
<!-- Dynamic list: remove an entry when the user dismisses its alert.
(visibleChange) emits false on dismiss. -->
@for (alertItem of alertsList(); track alertItem.id) {
<bs-alert color="danger"
(visibleChange)="alertVisibleChange(alertItem, $event)" dismissible>
{{ alertItem.text }}
</bs-alert>
}