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
Table of Contents
How to use ng notifications jaspero in angular 4 for beginner
Install ng notifications jaspero via npm
1 | npm install --save angular2-notifications |
Add the following script to app.module.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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)
1 | <simple-notifications></simple-notifications> |
To use this notification on the component, please import the module and service on the component.
1 2 | import { SimpleNotificationsModule } from 'angular2-notifications'; import { NotificationsService } from 'angular2-notifications'; |
Add the following script to the component construct.
1 | private notif: NotificationsService, |
Use the following script to run a notification.
1 2 3 4 5 6 7 8 9 10 11 | this.notif.success( 'Success', 'Yeahhh successfull create notification', { timeOut: 3000, showProgressBar: true, pauseOnHover: false, clickToClose: true, maxLength: 50 } ) |
For the use of other methods such as error, alert, warn, info, etc. you can read directly through the official website
If the script goes well will be like the following picture
Related article: Tutorial How To Integrate Angular 4 + Bootstrap 3 For Beginners
What to write in create notification button, I can’t implement it. Can you please share the complete template?
in your html
in your component
thx, i got a question, when i display the toast it does not fade away. even i can’t close it on clicking it.
There should be no problem, please check through your browser console, is there an error?https://seegatesite.com/wp-admin/edit-comments.php#comments-form