Angular Components

ClrAlert

The ClrAlert component displays a single alert.

Selector & Basic Usage

<clr-alert clrAlertType="warning"></clr-alert>

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.

<clr-alerts>
  <clr-alert>...</clr-alert>
</clr-alerts>

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.

<clr-alert>
  <clr-alert-item>This is my alert text</clr-alert-item>
</clr-alert>

CSS Classes

Wrappers

There are two types of wrappers that be placed inside of the ClrAlertItem component.

<clr-alert-item>
  <div class="alert-text">The alert text goes here.</div>
  <div class="alert-actions">
    <button class="btn alert-action">Buttons or Dropdowns go here.</button>
  </div>
</clr-alert-item>

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