ngx-notifier

A Simple Notification Service for Angular Applications

Usage no npm install needed!

<script type="module">
  import ngxNotifier from 'https://cdn.skypack.dev/ngx-notifier';
</script>

README

angular

NgxNotifier

A Simple Notification Service for Angular Applications

Tests Status npm version npm downloads license

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-toast

Installation

Install via Package managers such as npm or yarn

npm install ngx-notifier --save
# or
yarn add ngx-notifier

Usage

Import NgxNotifierModule and BrowserAnimationsModule

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxNotifierModule } from 'ngx-notifier';

@NgModule({
  imports: [ BrowserAnimationsModule, NgxNotifierModule ]
})

Then in HTML

<ngx-notifier></ngx-notifier>

Then in TS

import { NgxNotifierService } from './ngx-notifier/services/ngx-notifier.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [AppService]
})

export class AppComponent {
  constructor(private ngxNotifierService: NgxNotifierService) { }

  createNotification(){
      this.ngxNotifierService.createToast(message:string, style:string, duration: number);
  }
}

Create a toast

this.ngxNotifierService.createToast(message:string, style:string, duration: number);
  • 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

this.ngxNotifierService.clear();

Clear the last toast

this.ngxNotifierService.clearLast();

Notifier Component

Notifier component accepts

<ngx-notifier [allowDuplicates]="true"
              [allowHTML]="false"
              [className]="myCustomClassName"
              [duration]="5000"
              [disableAnimations]="false"
              [dismissOnClick]="false"
              [insertOnTop]="true"
              [max]="5">
</ngx-notifier>
  • 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

Demo at stackblitz ngx-notifier