Alert
Fully customizable, reusable alert component styled with Bootstrap CSS. Designed for standalone usage, tree-shakable imports, and reactive state via Angular signals. Configure the alert type, visibility, dismiss behavior, and custom classes.
Overview
Examples
Overview
Import AlertComponent and drop an <alert> element into your template with the message projected as content. Set type to choose the contextual style, toggle visibility with isOpen, and control dismissal with dismissible, dismissOnTimeout, and dismissTimeout. Listen to closed to react when the alert is dismissed.
- The alert is tree-shakable: only imported features are included in your bundle.
- All inputs are reactive and support Angular signals.
- For more customization, use the
classinput to add custom styles.
API
Selectors
alert, lib-alert
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
type | AlertType | 'info' | Alert style: 'info', 'primary', 'secondary', 'success', 'warning', 'danger', 'dark', 'light' |
isOpen | boolean | true | Is the alert visible |
dismissible | boolean | true | Show an inline "Close" button |
dismissOnTimeout | boolean | true | Dismiss the alert after the timeout |
dismissTimeout | number | 5000 | Timeout in ms before auto-dismiss |
class | string | '' | Additional CSS classes |
Outputs
| Name | Payload | Description |
|---|---|---|
closed | void | Emits when the alert is closed |
Requires Bootstrap styles to be loaded for the alert to render correctly.