Angular Alert Component

Alert

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.

Available in Other JavaScript Frameworks

CoreUI Angular Alert Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:

On this page

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.

import { Component } from '@angular/core';
import { AlertComponent } from '@coreui/angular';

@Component({
  selector: 'docs-alert-colors',
  templateUrl: './alert-colors.component.html',
  imports: [AlertComponent]
})
export class AlertColorsComponent {}

<c-alert>A simple primary alert—check it out!</c-alert>
<c-alert color="secondary">A simple secondary alert—check it out!</c-alert>
<c-alert color="success">A simple success alert—check it out!</c-alert>
<c-alert color="danger">A simple danger alert—check it out!</c-alert>
<c-alert color="warning">A simple warning alert—check it out!</c-alert>
<c-alert color="info">A simple info alert—check it out!</c-alert>
<c-alert color="light">A simple light alert—check it out!</c-alert>
<c-alert color="dark">A simple dark alert—check it out!</c-alert>

Link color

Use the cAlertLink directive class to quickly provide matching colored links within any alert.

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { AlertComponent, AlertLinkDirective } from '@coreui/angular';

@Component({
  selector: 'docs-alert-link-color',
  templateUrl: './alert-link-color.component.html',
  imports: [AlertComponent, AlertLinkDirective, RouterLink]
})
export class AlertLinkColorComponent {}

<c-alert color="primary">
  A simple primary alert with <a cAlertLink [routerLink]>an example link</a>. Give it a click if you like.
</c-alert>
<c-alert color="secondary">
  A simple secondary alert with <a cAlertLink [routerLink]>an example link</a>. Give it a click if you like.
</c-alert>
<c-alert color="success">
  A simple success alert with <a cAlertLink [routerLink]>an example link</a>. Give it a click if you like.
</c-alert>
<c-alert color="danger">
  A simple danger alert with <a cAlertLink [routerLink]>an example link</a>. Give it a click if you like.
</c-alert>
<c-alert color="warning">
  A simple warning alert with <a cAlertLink [routerLink]>an example link</a>. Give it a click if you like.
</c-alert>
<c-alert color="info">
  A simple info alert with <a cAlertLink [routerLink]>an example link</a>. Give it a click if you like.
</c-alert>
<c-alert color="light">
  A simple light alert with <a cAlertLink [routerLink]>an example link</a>. Give it a click if you like.
</c-alert>
<c-alert color="dark">
  A simple dark alert with <a cAlertLink [routerLink]>an example link</a>. Give it a click if you like.
</c-alert>

Additional content

Alert can also incorporate supplementary HTML elements like heading with cAlertHeading, paragraph, and divider.

import { Component } from '@angular/core';
import { AlertComponent, AlertHeadingDirective } from '@coreui/angular';

@Component({
  selector: 'docs-alert-additional-content',
  templateUrl: './alert-additional-content.component.html',
  imports: [AlertComponent, AlertHeadingDirective]
})
export class AlertAdditionalContentComponent {}

<c-alert color="success">
  <h4 cAlertHeading>Well done!</h4>
  <p>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.</p>
  <hr />
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</c-alert>

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.

import { Component, signal } from '@angular/core';
import { AlertComponent, ButtonDirective } from '@coreui/angular';

@Component({
  selector: 'docs-alert-dismissing',
  templateUrl: './alert-dismissing.component.html',
  imports: [AlertComponent, ButtonDirective]
})
export class AlertDismissingComponent {
  readonly visible = signal(true);
  readonly dismissible = signal(true);
}

@let isVisible = visible();
@if (isVisible) {
  <c-alert [(visible)]="visible" [dismissible]="dismissible()" color="light" fade>
    <strong>Go right ahead</strong> and click that dismiss over there on the right.
  </c-alert>
}
<hr>
<button cButton (click)="visible.update(value=> !value)">{{ isVisible ? 'Hide' : 'Show' }}</button>
<button (click)="dismissible.update(value=> !value)" cButton class="me-1" color="secondary">Toggle</button>

Custom template

Use alertButtonCloseTemplate to customize close button.

import { Component, signal } from '@angular/core';
import { AlertComponent, ButtonCloseDirective, ButtonDirective, TemplateIdDirective } from '@coreui/angular';

@Component({
  selector: 'docs-alert-custom-template',
  templateUrl: './alert-custom-template.component.html',
  imports: [AlertComponent, TemplateIdDirective, ButtonCloseDirective, ButtonDirective]
})
export class AlertCustomTemplateComponent {
  readonly visible = signal(true);

  onResetDismiss() {
    this.visible.set(true);
  }
}

<c-alert
  [(visible)]="visible"
  color="dark"
  dismissible
  fade
  variant="solid">
  <ng-template cTemplateId="alertButtonCloseTemplate">
    <button (click)="visible.set(false)" cButtonClose dark></button>
  </ng-template>
  <strong>Go right ahead</strong> and click that dismiss over there on the right.
</c-alert>

<hr>
<button (click)="onResetDismiss()" cButton color="secondary">Reset</button>

Icons

You can use Icons and flexbox utilities to create alerts with icons.

import { Component } from '@angular/core';
import { cilCheck } from '@coreui/icons';
import { AlertComponent } from '@coreui/angular';
import { IconDirective } from '@coreui/icons-angular';

@Component({
  selector: 'docs-alert-icons',
  templateUrl: './alert-icons.component.html',
  imports: [AlertComponent, IconDirective]
})
export class AlertIconsComponent {
  icons = { cilCheck };
}

<c-alert color="dark" class="d-flex align-items-center">
    <svg [cIcon]="icons.cilCheck" class="flex-shrink-0 me-2" size="xl"></svg>
    <div>An example alert with cIcon</div>
</c-alert>

<c-alert color="secondary" class="d-flex align-items-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
        class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
        <path
            d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
    </svg>
    <div>An example alert with svg icon</div>
</c-alert>

<hr>

<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
    <symbol id="check-circle-fill" fill="currentColor" viewBox="0 0 16 16">
        <path
            d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
    </symbol>
    <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
        <path
            d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
    </symbol>
    <symbol id="exclamation-triangle-fill" fill="currentColor" viewBox="0 0 16 16">
        <path
            d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
    </symbol>
</svg>

<c-alert color="primary" class="d-flex align-items-center">
    <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:">
        <use xlink:href="#info-fill" />
    </svg>
    <div>An example primary alert with an icon</div>
</c-alert>
<c-alert color="success" class="d-flex align-items-center">
    <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:">
        <use xlink:href="#check-circle-fill" />
    </svg>
    <div>An example success alert with an icon</div>
</c-alert>
<c-alert color="warning" class="d-flex align-items-center">
    <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:">
        <use xlink:href="#exclamation-triangle-fill" />
    </svg>
    <div>An example warning alert with an icon</div>
</c-alert>
<c-alert color="danger" class="d-flex align-items-center">
    <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:">
        <use xlink:href="#exclamation-triangle-fill" />
    </svg>
    <div>An example danger alert with an icon</div>
</c-alert>

API reference

Alert Module

import { AlertModule } from '@coreui/angular';

@NgModule({ 
  imports: [AlertModule,]
})
export class AppModule(){}

c-alert

component

jsx

import { AlertComponent } from '@coreui/angular'

Props

Property	Default	Type
color	`'primary'`	`string`
Sets the color context of the component to one of CoreUI’s themed colors.
dismissible	`false`	`boolean`
Optionally adds a close button to the alert and allow it to self-dismiss.
fade	`false`	`boolean`
Adds animation for dismissible alert.
role	`'alert'`	`string`
Default role for alert
variant	`undefined`	`'solid'`
Set the alert variant to a solid.
visible	`true`	`boolean`
Toggle the visibility of the alert component.

Events

Event name

Event name
visibleChange
Event triggered on the alert visibility change. `$event` `boolean`

visibleChange

Event triggered on the alert visibility change.

$event boolean

cAlertHeading

directive

jsx

import { AlertHeadingDirective } from '@coreui/angular'

cAlertLink

directive

jsx

import { AlertLinkDirective } from '@coreui/angular'