Angular Alert Component
Angular alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages.
Examples
Colors
Angular Alert is prepared for any length of text, as well as an optional close button. For a styling, use one of the required contextual color
props (e.g., primary
). For inline dismissal, use the dismissing prop.
Link color
Use the cAlertLink
directive class to quickly provide matching colored links within any alert.
Additional content
Alert can also incorporate supplementary HTML elements like heading with cAlertHeading
, paragraph, and divider.
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Dismissing
Alerts can also be easily dismissed. Just add the dismissible
prop and fade
for animation.
To remove an alert from the DOM, you can use *ngIf
directive.
Custom template
Use alertButtonCloseTemplate
to customize close button.
Icons
You can use Icons and flexbox utilities to create alerts with icons.
API reference
Alert Module
import { AlertModule } from '@coreui/angular';
@NgModule({
imports: [AlertModule,]
})
export class AppModule(){}
c-alert
component
Inputs
name | description | type | default |
---|---|---|---|
color |
Sets the color context of the component | string |
'primary' |
dismissible |
adds a close button to alert for self dismiss | boolean |
false |
fade |
adds optional animation for dismissible alert | boolean |
false |
variant |
Set the alert variant to a solid | string: 'solid' |
undefined |
visible |
toggle visibility of alert component | boolean |
true |
Outputs
name | description | type |
---|---|---|
visibleChange |
Event triggered on the alert dismiss. | boolean |
cAlertHeading
directive
cAlertLink
directive