Toaster visible only on next user click

[olaf89]

I have an issue, when toaster is supposed to be added by background stream its not being displayed until screen is clicked.
So in order for it to become visible i need to do
setTimeout(_ => { window.document.body.click(); }, 1 );

Is there a better way to run change detection for this component? or maybe i should configure it somehow.

[scttcper]

What do you mean by background stream?

[olaf89]

My actual case is rxjs stream created from websocket events, meaning no user interaction with UI.

[trevor-hackett]

You could try injecting ChangeDetectorRef into your service/component and mannually trigger a change detection using the detectChanges() method.

See https://angular.io/docs/ts/latest/api/core/index/ChangeDetectorRef-class.html

[olaf89]

That was first thing i tried, and would be an acceptable solution as well. Yet it does not seem to work.

[trevor-hackett]

Might not be working because ChangeDetectorRef.detectChanges() only triggers change detection in the local component (and it's children).

Have you tried ApplicationRef.tick()? (docs)

It's suppose to trigger a full change detection for the whole application if I'm understanding the docs correctly.

[olaf89]

It works when you detect changes after onShown.
toast.onShown.first().subscribe(_ => this.appRef.tick());
Thats much better then initial solution. Thanks :)

[trevor-hackett]

Might be able to do something where we add another configuration flag or something where when the toast is displayed and the flag is set, we trigger a change detection within the component. What do you think @scttcper

[scttcper]

sounds good to me.

Maybe here? https://github.com/scttcper/toastr-ng2/blob/master/src/lib/toast-injector.ts#L35
or would putting it into the toast component itself make sense?

[trevor-hackett]

Yeah that might be the best place for it.

It would be nice to only trigger change detection in the components that need it. I currently don't have a setup to mimic the scenario that @olaf89 has, so I won't know if placing it withing the toast component and only triggering ChangeDetectorRef.detectChanges() will be enough or not.

But since setting the flag to run change detection is obviously intentional, it probably isn't a bad thing to use ApplicationRef.tick().

[olaf89]

If you prepare any solution Im happy to test that, just let me know.

[scttcper]

I committed straight on master like a terrible person.

ceccaf7 has the changes. See if turning on onActivateTick works.

Released in 4.1.0

[olaf89]

I tried it and it solves the issue, thanks!