A Simple Notification Service for Angular Applications

Downloads in past


3013.0.017 days ago6 years agoMinified + gzip package size for ngx-notifier in KB


<img src="./assets/angular.png" alt="angular" width="350">


A Simple Notification Service for Angular Applications

<img alt="Tests Status" src="">
<img alt="npm version" src="">
<img alt="npm downloads" src="">
<img alt="license" src="">

Getting Started

ngx-notifier is a simple notification service for Angular applications and is meant to be simple with limited features.
If you are looking for angularjs(1.x) version, Try angularjs-toastangularjs-toast


Install via Package managers such as npmnpm or yarnyarn
npm install ngx-notifier --save
# or
yarn add ngx-notifier


Import provideAnimations in your app.config to enable required animations
import { ApplicationConfig } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
  providers: [provideAnimations()],

Then, import NgxNotifierComponent in your app.component.ts
import { NgxNotifierComponent, NgxNotifierService } from 'ngx-notifier';

  selector: 'app-root',
  standalone: true,
  imports: [NgxNotifierComponent],
  templateUrl: './app.component.html',
export class AppComponent {
  constructor(private ngxNotifierService: NgxNotifierService) {}

  createNotification() {
    this.ngxNotifierService.createToast(message, style, duration);

Then, add the ngx-notifier component in your app.component.html

Create a toast

this.ngxNotifierService.createToast(message, style, duration);

  • message message to be sent as notification
  • style notification style, which can be the following success|danger|warning|info. Default is info
  • duration in milliseconds, timeout for the notification

Clear all toasts


Clear the last toast


Notifier Component

Notifier component accepts

  • allowDuplicates: whether to allow duplicate messages in notifications
  • allowHTML whether to allow or display HTML as it is, HTML will be sanitized and any JS will be maked as unsafe.
  • className custom class for notifications
  • disableAnimations whether to enable or disable animations for the toast.
  • dismissOnClick: dismiss notification on click
  • duration time in milliseconds for dismissing notifications, default is 60s
  • insertOnTop whether to insert notification on top or bottom
  • max: maximum number of notifications to be displayed


Demo at stackblitz ngx-notifier