Alert

fuse-alert is a customizable component for displaying all kinds of alerts across your app. They can be controlled from your components as well as from the FuseAlertService.

Exported as: fuseAlert

Module

Properties

Name Description Default
@Input()
name: string
A unique name for the alert box to access it from FuseAlertService. Auto generated
@Input()
appearance: FuseAlertAppearance
Appearance of the alert box. soft
@Input()
dismissed: boolean
Whether the alert box is dismissed. false
@Input()
dismissible: boolean
Whether the alert box is dismissible. This must be true for dismissed to work. false
@Input()
showIcon: boolean
Whether the icon is shown. true
@Input()
type: FuseAlertType
The type of the alert box. primary
@Output()
afterDismissed: true
An event emitted after the alert box dismissed. -
@Output()
afterShown: true
An event emitted after the alert box shown. -

Type aliases

Appearance

Alert component comes with 3 different built-in appearances to choose from:

Soft (default)
Primary alert Thank you for joining our newsletter Accent alert Your changes has been saved Warn alert Fill all required fields to proceed next step Basic alert You have 3 new notifications Info alert This is a alert with an 'info' level severity Success alert This is a alert with a 'success' level severity Warning alert This is a alert with a 'warning' level severity Error alert This is a alert with an 'error' level severity
Outline
Primary alert Thank you for joining our newsletter Accent alert Your changes has been saved Warn alert Fill all required fields to proceed next step Basic alert You have 3 new notifications Info alert This is a alert with an 'info' level severity Success alert This is a alert with a 'success' level severity Warning alert This is a alert with a 'warning' level severity Error alert This is a alert with an 'error' level severity
Fill
Primary alert Thank you for joining our newsletter Accent alert Your changes has been saved Warn alert Fill all required fields to proceed next step Basic alert You have 3 new notifications Info alert This is a alert with an 'info' level severity Success alert This is a alert with a 'success' level severity Warning alert This is a alert with a 'warning' level severity Error alert This is a alert with an 'error' level severity
Border
Primary alert Thank you for joining our newsletter Accent alert Your changes has been saved Warn alert Fill all required fields to proceed next step Basic alert You have 3 new notifications Info alert This is a alert with an 'info' level severity Success alert This is a alert with a 'success' level severity Warning alert This is a alert with a 'warning' level severity Error alert This is a alert with an 'error' level severity

Title and alert

All alert boxes have title and alert content that can be customized.

Example
Alert title This is the alert content Alert title without any content Simple alert without a title

Icons

The info, success, warning and error type alert boxes have default icons and they are visible by default. If you wish to hide those icons, use the [showIcon]="false" input.

Example
Success alert with no icon

Custom icons

All alert boxes come with custom icon support. To use a custom icon, simply use fuseAlertIcon attribute on an element you wish to use as the icon. If there is a default icon for the alert box, custom icon will override it.

Example
Info alert with a custom icon

Dismissible alerts

Dismissible alerts can be removed from the view by clicking their dismiss (x) button. In order to get the dismiss button visible, the [dismissed] input must be explicitly set either to true or false. Setting the [dismissed] input to null or simply removing it from the element will remove the dismiss button.

Example
Your subscription model is successfully upgraded to the Lifetime Pro. This one has a lot of text so you can see how the text is going to be displayed. Also this is a dismissible alert box which can be dismissed by clicking the dismiss button.

Dismissible alerts controlled from the service

Alerts can be shown and dismissed via FuseAlertService.

Example
Your subscription model is successfully upgraded to the Lifetime Pro. This one has a lot of text so you can see how the text is going to be displayed. Also this is a dismissible alert box which can be dismissed by clicking the close button.