A Simple Notification Service for Angular Applications
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
Install via Package managers such as npm or yarn
npm install ngx-notifier --save
# or
yarn add ngx-notifier
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);
}
}
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 isinfo
- duration in milliseconds, timeout for the notification
this.ngxNotifierService.clear();
this.ngxNotifierService.clearLast();
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 at stackblitz ngx-notifier