Angular Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible Angular alerts.
Examples
Default! This is a default alert—check it out!
Primary! This is a primary alert—check it out!
Secondary! This is a secondary alert—check it out!
Info! This is a info alert—check it out!
Success! This is a success alert—check it out!
Danger! This is a danger alert—check it out!
Warning! This is a warning alert—check it out!
<alert
class="alert-dismissible"
[dismissible]="dismissible"
[type]="'default'">
<span class=" alert-text">
<strong>Default! </strong> This is a default alert—check it out!
</span>
</alert>
<alert
class="alert-dismissible"
[dismissible]="dismissible"
[type]="'primary'">
<span class=" alert-text">
<strong>Primary! </strong> This is a primary alert—check it out!
</span>
</alert>
<alert
class="alert-dismissible"
[dismissible]="dismissible"
[type]="'secondary'">
<span class=" alert-text">
<strong>Secondary! </strong> This is a secondary alert—check it out!
</span>
</alert>
<alert
class="alert-dismissible"
[dismissible]="dismissible"
[type]="'info'">
<span class=" alert-text">
<strong>Info! </strong> This is a info alert—check it out!
</span>
</alert>
<alert
class="alert-dismissible"
[dismissible]="dismissible"
[type]="'success'">
<span class=" alert-text">
<strong>Success! </strong> This is a success alert—check it out!
</span>
</alert>
<alert
class="alert-dismissible"
[dismissible]="dismissible"
[type]="'danger'">
<span class=" alert-text">
<strong>Danger! </strong> This is a danger alert—check it out!
</span>
</alert>
<alert
class="alert-dismissible"
[dismissible]="dismissible"
[type]="'warning'">
<span class=" alert-text">
<strong>Warning! </strong> This is a warning alert—check it out!
</span>
</alert>
With icon
Warning! This is a warning alert—check it out
that has an icon too!
<alert class="alert-dismissible" [dismissible]="dismissible" [type]="'success'">
<span class=" alert-icon"> <i class="ni ni-like-2"> </i> </span>
<span class=" alert-text">
<strong> Success! </strong> This is a success alert—check it out!
</span>
</alert>Dismissing
Default! This is a default alert—check it
out!
Primary! This is a primary alert—check it
out!
Secondary! This is a secondary alert—check it
out!
Info! This is a info alert—check it out!
Success! This is a success alert—check it
out!
Danger! This is a danger alert—check it
out!
Warning! This is a warning alert—check it
out!
<div class="alert alert-dismissible" [dismissible]="dismissible" [type]="'default'" [role]="alert">
<span class="alert-icon"><i class="ni ni-like-2"></i></span>
<span class="alert-text"><strong>Default!</strong> This is a default alert—check it out!</span>
<button [type]="button" class="close" [data-dismiss]="alert" [aria-label]="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-dismissible" [dismissible]="dismissible" [type]="'primary'" [role]="alert">
<span class="alert-icon"><i class="ni ni-like-2"></i></span>
<span class="alert-text"><strong>Primary!</strong> This is a primary alert—check it out!</span>
<button [type]="button" class="close" [data-dismiss]="alert" [aria-label]="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-dismissible" [dismissible]="dismissible" [type]="'secondary'" [role]="alert">
<span class="alert-icon"><i class="ni ni-like-2"></i></span>
<span class="alert-text"><strong>Secondary!</strong> This is a secondary alert—check it out!</span>
<button [type]="button" class="close" [data-dismiss]="alert" [aria-label]="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-dismissible" [dismissible]="dismissible" [type]="'info'" [role]="alert">
<span class="alert-icon"><i class="ni ni-like-2"></i></span>
<span class="alert-text"><strong>Info!</strong> This is a info alert—check it out!</span>
<button [type]="button" class="close" [data-dismiss]="alert" [aria-label]="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-dismissible" [dismissible]="dismissible" [type]="'success'" [role]="alert">
<span class="alert-icon"><i class="ni ni-like-2"></i></span>
<span class="alert-text"><strong>Success!</strong> This is a success alert—check it out!</span>
<button [type]="button" class="close" [data-dismiss]="alert" [aria-label]="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-dismissible" [dismissible]="dismissible" [type]="'danger'" [role]="alert">
<span class="alert-icon"><i class="ni ni-like-2"></i></span>
<span class="alert-text"><strong>Danger!</strong> This is a danger alert—check it out!</span>
<button [type]="button" class="close" [data-dismiss]="alert" [aria-label]="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-dismissible" [dismissible]="dismissible" [type]="'warning'" [role]="alert">
<span class="alert-icon"><i class="ni ni-like-2"></i></span>
<span class="alert-text"><strong>Warning!</strong> This is a warning alert—check it out!</span>
<button [type]="button" class="close" [data-dismiss]="alert" [aria-label]="Close">
<span aria-hidden="true">×</span>
</button>
</div>