On this page

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](#dismissing).

### 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.

### 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

 ```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` |

### cAlertHeading _directive_ ### cAlertLink _directive_