Angular 2 : Loading nested Component is destroying

Question

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

Answer 1

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