Angular Notify

Pro Component

The Angular Notify is a beautiful, responsive, customisable, accessible replacement for Javascript’s popup boxes. This plugin helps to turn standard Angular alerts into "growl" like notifications.
Keep reading our Angular Notify examples and learn how to use this plugin.

Usage

CSS

In order to use this plugin on your page you will need to include the following styles in the “Page plugins” area from the page’s head section:

@import '~ngx-toastr/toastr-bs4-alert';

Initialization

Please read the official documentation to see the complete list of options and methods.

Examples

Colors

<button
  class=" btn btn-default"
  (click)="showNotification('default')">
  Default
</button>

<button
  class=" btn btn-info"
  (click)="showNotification('info')">
  Info
</button>

<button
  class=" btn btn-success"
  (click)="showNotification('success')">
  Success
</button>

<button
  class=" btn btn-warning"
  (click)="showNotification('warning')">
  Warning
</button>

<button
  class=" btn btn-danger"
  (click)="showNotification('danger')">
  Danger
</button>

<!-- Typescript -->

import { ToastrService } from "ngx-toastr";

constructor(private toastr: ToastrService) {}
showNotification(type) {
  const color = Math.floor(Math.random() * 5 + 1);
  if (type === 'default') {
    this.toastr.show(
      '<span class="alert-icon ni ni-bell-55" data-notify="icon"></span> <div class="alert-text"</div> <span class="alert-title" data-notify="title">Ngx Toastr</span> <span data-notify="message">Turning standard Bootstrap alerts into awesome notifications</span></div>',
      '',
      {
        timeOut: 8000,
        closeButton: true,
        enableHtml: true,
        tapToDismiss: false,
        titleClass: 'alert-title',
        positionClass: 'toast-top-center',
        toastClass: "ngx-toastr alert alert-dismissible alert-default alert-notify",
      }
    );
  }
  if (type === 'danger') {
    this.toastr.show(
      '<span class="alert-icon ni ni-bell-55" data-notify="icon"></span> <div class="alert-text"</div> <span class="alert-title" data-notify="title">Ngx Toastr</span> <span data-notify="message">Turning standard Bootstrap alerts into awesome notifications</span></div>',
      '',
      {
        timeOut: 8000,
        closeButton: true,
        enableHtml: true,
        tapToDismiss: false,
        titleClass: 'alert-title',
        positionClass: 'toast-top-center',
        toastClass: "ngx-toastr alert alert-dismissible alert-danger alert-notify",
      }
    );
  }
  if (type === 'success') {
    this.toastr.show(
      '<span class="alert-icon ni ni-bell-55" data-notify="icon"></span> <div class="alert-text"</div> <span class="alert-title" data-notify="title">Ngx Toastr</span> <span data-notify="message">Turning standard Bootstrap alerts into awesome notifications</span></div>',
      '',
      {
        timeOut: 8000,
        closeButton: true,
        enableHtml: true,
        tapToDismiss: false,
        titleClass: 'alert-title',
        positionClass: 'toast-top-center',
        toastClass: "ngx-toastr alert alert-dismissible alert-success alert-notify",
      }
    );
  }
  if (type === 'warning') {
    this.toastr.show(
      '<span class="alert-icon ni ni-bell-55" data-notify="icon"></span> <div class="alert-text"</div> <span class="alert-title" data-notify="title">Ngx Toastr</span> <span data-notify="message">Turning standard Bootstrap alerts into awesome notifications</span></div>',
      '',
      {
        timeOut: 8000,
        closeButton: true,
        enableHtml: true,
        tapToDismiss: false,
        titleClass: 'alert-title',
        positionClass: 'toast-top-center',
        toastClass: "ngx-toastr alert alert-dismissible alert-warning alert-notify",
      }
    );
  }
  if (type === 'info') {
    this.toastr.show(
      '<span class="alert-icon ni ni-bell-55" data-notify="icon"></span> <div class="alert-text"</div> <span class="alert-title" data-notify="title">Ngx Toastr</span> <span data-notify="message">Turning standard Bootstrap alerts into awesome notifications</span></div>',
      '',
      {
        timeOut: 8000,
        closeButton: true,
        enableHtml: true,
        tapToDismiss: false,
        titleClass: 'alert-title',
        positionClass: 'toast-top-center',
        toastClass: "ngx-toastr alert alert-dismissible alert-info alert-notify",
      }
    );
  }