0

I'm using a ng2-toastr in my page and working fine, but when I have a nested component in the page the existing ng2-toastr(ToastManager) scope is destroyed and toastr is not working.

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

In My method when I call 

this.toastr.warning('Its Warning','Alert');

Its Working fine, but in my html when I'm loading other component i.e

<es-app></es-app>

the toastr in my page is not working (No errors)

Sometimes I get:

Attempt to use a destroyed view: detectChanges Error: Attempt to use a destroyed view: detectChanges at ViewDestroyedError

AT82
  • 71,416
  • 24
  • 140
  • 167
sudhir
  • 1,387
  • 3
  • 25
  • 43

1 Answers1

0

By initializing the container inside ngAfterViewInit resolved the issue

this.toastr.setRootViewContainerRef(vcr);

instead of contsructor place in 

ngAfterViewInit(){
this.toastr.setRootViewContainerRef(this.vcr);
}

Because the nested components are loading and destroying the page instance, So we have to load after all components are loaded and that happens in ngAfterViewInit as per page lifecycle hook

sudhir
  • 1,387
  • 3
  • 25
  • 43