Topic: toast alter not properly displaying when called from SSE callback
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 }; }
hanskrywaa pro answered 6 years ago
Arkadiusz Idzikowski staff answered 6 years ago
ApocDev pro answered 6 years ago
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes
Dawid Adach pro commented 7 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 7 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.3Damian Gemza staff commented 7 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