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
.