Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.
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.
Loading...
## 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](#dismissing).
Loading...
Loading...
Loading...
### Link color
Use the `cAlertLink` directive class to quickly provide matching colored links within any alert.
Loading...
Loading...
Loading...
### Additional content
Alert can also incorporate supplementary HTML elements like heading with `cAlertHeading`, paragraph, and divider.
Loading...
Loading...
Loading...
### 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.
Loading...
Loading...
Loading...
### Custom template
Use `alertButtonCloseTemplate` to customize close button.
Loading...
Loading...
Loading...
### Icons
You can use Icons and flexbox utilities to create alerts with icons.
Loading...
Loading...
Loading...
---
## API reference
### Alert Module
```typescript
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` |