• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Javascript » Tutorial Angular 4 How To Use Toast Notifications With Jaspero

Tutorial Angular 4 How To Use Toast Notifications With Jaspero

By Sigit Prasetya Nugroho ∙ November 15, 2017 ∙ Javascript ∙ 3 Comments

Share : TwitterFacebookTelegramWhatsapp

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

  • 1 How to use ng notifications jaspero in angular 4 for beginner
    • 1.1 So my short tutorial about angular tutorial 4 toast ng notifications jaspero hopefully, useful

How to use ng notifications jaspero in angular 4 for beginner

Tutorial Angular 4 How To Use Toast Notifications With Jaspero Min

Install ng notifications jaspero via npm

Related Articles :

  • Trick To Redirect New Window Or Tab With Post Method On Angular 5
  • Tutorial To Change Date Format Ng-bootstrap Datepicker Angular 5
  • Tutorial Simple CRUD Angular 5 And Lumen 5.6 For Beginners

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

Tutorial Angular 4 How To Use Toast Notifications With Jaspero Example

Related article: Tutorial How To Integrate Angular 4 + Bootstrap 3 For Beginners

So my short tutorial about angular tutorial 4 toast ng notifications jaspero hopefully, useful

Another Javascript Related Post :

  • Adept Using Datatables Plugin In 10 Minutes For Beginners (Tutorial)
  • The Using Of Reactstrap And React-Table, Suitable For Beginners
  • Tutorial Create Simple Block UI Using React JS
  • How To Implement Login Page And Protected Route ReactJS
  • Complete Tutorial React Router Dom For Beginners (Easy-To-Understand)
  • The Right Way Understanding React Lifecycle For Beginners

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Comments

  1. Avatar for VishalVishal says

    January 24, 2018 at 11:38 am

    What to write in create notification button, I can’t implement it. Can you please share the complete template?

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      January 24, 2018 at 2:25 pm

      in your html

      1
      <button (click)="testnotif()">test notif</button>

      in your component

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      testnotif(){
      this.notif.success(
                       'Success',
                       'Yeahhh successfull create notification',
                       {
                         timeOut: 3000,
                         showProgressBar: true,
                         pauseOnHover: false,
                         clickToClose: true,
                         maxLength: 50
                       }
                     )
      }

      Reply
  2. Avatar for PabloPablo says

    May 10, 2018 at 6:07 pm

    thx, i got a question, when i display the toast it does not fade away. even i can’t close it on clicking it.

    Reply
    • Avatar for Sigit Prasetya NugrohoSigit Prasetya Nugroho says

      May 15, 2018 at 1:42 am

      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

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (7) Publisher Tips (5) react (3) Reactjs (7) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) widget (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2021 Seegatesite.com