CODEWITHSUNDEEP
angular
user1765862
user1765862

Reputation: 14145

Displaying notification messages in angular2 app failes

I want to implement notification messages for my simple angular 2 app. I decided to use ng2-toasty. My simple angular 2 app is based on ng2-admin theme.

  1. I installed package npm install ng2-toasty --save

  2. Import and register ToastyModule in the AppModule

import { ToastyModule } from 'ng2-toasty';
...
 imports: [ 
    ToastyModule.forRoot(),
]

3. Inside Component I import again Toast service and injected inside constructor

import { ToastyService, ToastyConfig, ToastOptions, ToastData } from 'ng2-toasty';
constructor(private toastyService: ToastyService) { }
... 
// This error is raised on purpose inside some method
this.toastyService.error({
      title: 'Error',
      msg: 'An unexpected error occured!',
      theme: 'default',
      showClose: true,
      timeout: 2000
});

Inside app.component.html I added on top of the file

<ng2-toasty [position="'top-right'"]></ng2-toasty>

I don't get any errors inside console but still notification message is not shown. I've found several examples where I need to update systemjs.config.js or webpack.config.vendor.js files but inside this template I cannot find one. What I'm missing here?

Upvotes: 0

Views: 634

Answers (2)

rykamol
rykamol

Reputation: 1147

Change this line of code Inside app.component.html

<ng2-toasty [position] ="'top-right'"></ng2-toasty>

Upvotes: 1

TheUnreal
TheUnreal

Reputation: 24472

Usually when you are trying to import a new module to your app, you just declare it in your app module (or any other module you wish to use it) and then use it.

In your case, ng toasty runs as a service as well, so you will need to import it as a provider too. In your app module providers[] array, add:

providers: [ToastyService] // add ToastyService

Upvotes: 0

Related Questions