toast alter not properly displaying when called from SSE cal

Topic: toast alter not properly displaying when called from SSE callback

ufasoli pro asked 6 years ago

Hi, I'm having an issue with the alert component. I have a SSE subscription, and when I receive a message from the server I want to display it using the alert component, however the alert is not properly displayed : https://ibb.co/hqSTZd However if I scroll down or change the size of the page, the message suddenly appears properly : https://ibb.co/ejV47y It also works properly when attempting to display the alert outside the SSE callback (also as you can see in the code below I tried "ticking" the view to no avail. Any ideas? Below is the code I'm using :


export class CeComponent implements OnInit {



constructor(private sessionService: SessionService, private toast: ToastService, private app: ApplicationRef) {
}

ngOnInit() {
let source = new EventSource(AppSettings.SSE_NOTIFICATION_URL);

source.onmessage = (msg: MessageEvent) => {

console.log("Received SSE msg : " + msg.data);
let notifMessage = JSON.parse(msg.data);


let options = {
positionClass: "toast-bottom-right"
};
this.toast.info(notifMessage.message, "information", options);

this.app.tick(); // attempt to force view refresh to fix alert not showing

};

}

Dawid Adach pro commented 6 years ago

Could you provide us an isolated sample so we could reproduce the issue on our end? Please mail it to d.adach@mdbootstrap.com . Please also provide the environmental details (versions of Angular, CLI etc.) . Have you tried to inspect this invalid alert and see which class/lack of class is causing that behavior?

ufasoli pro commented 6 years ago

Hi, Thanks for the input, I tried sending one of your colleagues an email with the project but it got bounced by your email server. regarding the environement : Angular CLI: 6.0.3 Node: 10.1.0 OS: darwin x64 Angular: 6.0.2 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router Package Version ----------------------------------------------------------- @angular-devkit/architect 0.6.3 @angular-devkit/build-angular 0.6.3 @angular-devkit/build-optimizer 0.6.3 @angular-devkit/core 0.6.3 @angular-devkit/schematics 0.6.3 @angular/cli 6.0.3 @ngtools/webpack 6.0.3 @schematics/angular 0.6.3 @schematics/update 0.6.3 rxjs 6.1.0 typescript 2.7.2 webpack 4.8.3

Please insert min. 15 characters.

Damian Gemza staff commented 6 years ago

Dear ufasoli, Pack your project using some packing software like WinRar, WinZip, or something similar, share your project at Google Drive, and paste Dawid link to it. Or share it on another file-sharing website. Best Regards, Damian

Add comment

ApocDev pro answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

So, I had the exact same issue as above.

Turns out, the toast cannot be displayed properly when outside of a zone. (This happens quite often when handling callbacks from servers)

Simple fix in reality, but I suggest "exporting" this to a separate service, or MDB properly fixing their singleton service to actually execute this stuff from within a proper zone. (Otherwise, the setInterval/setTimeout and a whole slew of other things don't trigger properly)

Import an NgZone object:

private ngZone: NgZone

Then just wrap your toastService.error/warning in an _ngZone.run call (see below)

this.ngZone.run(() => this.toastService.error(action.message, action.title));

After that, all your toasts will work correctly. Enjoy folks.

Add comment

Arkadiusz Idzikowski staff answered 6 years ago

0 0 Best answer

Dear hanskrywaa, Which version of MDB Angular do you use? Please provide a code sample and reproduction steps so we could debug this problem. Regards, Arek

Add comment

hanskrywaa pro answered 6 years ago