sibiraj-s
NgxNotifier
A Simple Notification Service for Angular Applications
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-notifierUsage
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';
@Component({
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
<ngx-notifier></ngx-notifier>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 isinfo - 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