Angular Components
ClrAlert
The ClrAlert
component displays a single alert.
Selector & Basic Usage
Bindings
Binding | Type | Options | Default | Description |
---|---|---|---|---|
[clrAlertClosable] | input | true, false | true | If false, the alert will not be closable by clicking on the top-right "x". |
[(clrAlertClosed)] | two-way | true, false | false | Two-way binding on the state of the alert: opened or closed. |
[clrAlertType] | input | info, warning, success, danger | info | Sets the type of the alert |
[clrAlertSizeSmall] | input | true, false | false | Change the size to a small alert |
[clrAlertIcon] | input | any icon shape | varies | Allows you to customize the alert icon using any icon shape name |
[clrAlertAppLevel] | input | true, false | false | Changes the alert to be app level at the top of the page |
ClrAlerts
The ClrAlerts
component can host a group of alerts to enable pagination.
Binding | Type | Options | Default | Description |
---|---|---|---|---|
[(clrCurrentAlertIndex)] | two-way | 0, 1, 2, 3... | 0 | Sets the current index of alerts in a list |
[(clrCurrentAlert)] | two-way | instance of ClrAlert | any | Provides the currently activated ClrAlert instance |
ClrAlertItem
The ClrAlertItem
component wraps the alert content to support displaying an icon.
CSS Classes
Wrappers
There are two types of wrappers that be placed inside of the ClrAlertItem
component.
CSS Class | Host Element(s) | Type | Description | Required |
---|---|---|---|---|
.alert-text | div, span | Defines the text that is placed into the alert | true | |
.alert-actions | div, span | Defines any action buttons or dropdowns for an alert | false | |
.alert-action | button, clr-dropdown | Defines a button or dropdown to be styled for inside of an alert | true |