CODEWITHSUNDEEP
angular
code1
code1

Reputation: 8989

ng2-toastr in angular2 - Not working?

I want to use notification in my angular application. I put "ng2-toastr": "1.6.0" in package.json and clicked on restore packages in order to install ng2-toastr. After which, I imported

import { ToastModule } from 'ng2-toastr/ng2-toastr';

@NgModule({
    imports: [
        UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
        FormsModule,
        ToastModule.forRoot()
    ],

in app.module.ts

In one of my ts file I imported 

import { ToastsManager } from 'ng2-toastr/ng2-toastr';

and in constructor I added

 constructor(public toastr: ToastsManager, vcr: ViewContainerRef)  {
        this.toastr.setRootViewContainerRef(vcr);        
    }

And in of my methods, I added

addDetail() {  
        this.toastr.success('You are awesome!', 'Success!');
    }

I don't see the notification yet ! What is the reason?

Upvotes: 3

Views: 3830

Answers (1)

Julia Passynkova
Julia Passynkova

Reputation: 17859

I use Toaster and it looks the same except, do this this wiring with ViewContainerRef in my main app component.

Here is a github project with example: https://github.com/ipassynk/ng2-toastr-example

 @Component({
    selector: 'xxx-app-root',
    template: '<router-outlet></router-outlet>'
  })
  export class AppComponent {
    // http://valor-software.com/ng2-bootstrap/#/modals
    private viewContainerRef: ViewContainerRef;

    public constructor(public toastr: ToastsManager, viewContainerRef: ViewContainerRef) {
      // You need this small hack in order to catch application root view container ref (ng2-bootstrap)
      this.viewContainerRef = viewContainerRef;

      // Breaking change solution for Angular v2.2.x
      // https://github.com/PointInside/ng2-toastr
      this.toastr.setRootViewContainerRef(viewContainerRef);
    }
  }

Upvotes: 3

Related Questions