Tutorial Angular 4 How To Use Toast Notifications With Jaspero

Easily create message notifications on angular 4 using the jaspero library. Notifications are essential components of both web and desktop applications. From the various free notification plugins I choose on Jaspero’s NG Notifications. Besides easy to use this plugin also has a nice look. Follow the following tutorial

The tutorial on the use of NG Notifications angular 4 has been documented on the jaspero official website but beginners like me a little trouble for the first time using this notification. For that, I will share with you who have difficulty using this toast notifications.

Related article: Tutorial Create Angular 4 Currency Format Directive For Textbox

Okay we started the notification tutorial on angular 4

How to use ng notifications jaspero in angular 4 for beginner

Install ng notifications jaspero via npm

npm install --save angular2-notifications

1	npm install --save angular2-notifications

Add the following script to app.module.ts

import { SimpleNotificationsModule } from 'angular2-notifications';

@NgModule({
  declarations: [
   
  ],
  imports: [
    SimpleNotificationsModule.forRoot()
  ],
  providers: [ ],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { SimpleNotificationsModule } from 'angular2-notifications';

@NgModule({

declarations: [

imports: [

SimpleNotificationsModule.forRoot()

providers: [ ],

bootstrap: [AppComponent]

})

export class AppModule { }

Add the following script to app.component.html (you can place it on top level component or child component, my suggestion is better put on top level component)

<simple-notifications></simple-notifications>

1	<simple-notifications></simple-notifications>

To use this notification on the component, please import the module and service on the component.

import { SimpleNotificationsModule } from 'angular2-notifications';
import { NotificationsService } from 'angular2-notifications';

1 2	import { SimpleNotificationsModule } from 'angular2-notifications'; import { NotificationsService } from 'angular2-notifications';

Add the following script to the component construct.

 private notif: NotificationsService,

1	private notif: NotificationsService,

Use the following script to run a notification.

this.notif.success(
                 'Success',
                 'Yeahhh successfull create notification',
                 {
                   timeOut: 3000,
                   showProgressBar: true,
                   pauseOnHover: false,
                   clickToClose: true,
                   maxLength: 50
                 }
               )