Angular Alerts

Leave your user the choice to close the feedback message using Angular.

Alert Examples

Alerts can have how many words you want, as well as an optional close button. For styling, use one of the color classes presented below. (e.g., .bg-red-500).

pink! This is a pink alert - check it out!

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

@Component({
  selector: 'app-root',
  // templateUrl: './app.component.html',
  template: `<div *ngIf="showAlert" class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-pink-500">
  <span class="text-xl inline-block mr-5 align-middle">
    <i class="fas fa-bell"></i>
  </span>
  <span class="inline-block align-middle mr-8">
    <b class="capitalize">pink!</b> This is a pink alert - check it out!
  </span>
  <button class="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none" (click)="showAlert = false">
    <span>×</span>
  </button>
</div>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  showAlert = true;
}