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
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. | - |
Alert component comes with 3 different built-in appearances to choose from:
All alert boxes have title and alert content that can be customized.
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.
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.
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.
Alerts can be shown and dismissed via FuseAlertService
.