Alert does not work properly

Hello, I tried to implement the Alert too [1][2] in an Error-Handler-class, for displaying unexpected errors. But it just shows up, after scrolling on the page where the Error occurs or clicking in the page. If I switch off the options of the Alert, just the frame can be seen. usage of the alert:

Start your code here

import { ToastService } from 'ng-uikit-pro-standard'; import { ErrorHandler, Injector, Injectable } from '@angular/core'; @Injectable() export class GlobalErrorHandler implements ErrorHandler { private_errorTitle='An Error occured'; private_userErrorMessage='Sorry, an Error occured!'; private_options= { enableHtml:false, positionClass:'toast-bottom-right', closeButton:true, tapToDismiss:false, // extendedTimeout: 5000, progressBar:true }; constructor(privateinjector:Injector) { } public handleError(error) { const _toastService=this.injector.get(ToastService); this._errorTitle='An Error occured'; _toastService.error(this._userErrorMessage, this._errorTitle); console.log(error); } } --> where the Error is called: .subscribe( () => { this._finishedExerciseSets.get(block).add(exercise); this._waitForResponse=false; }, err => { this._waitForResponse=false; throw new Error(err); } ); Specifications: Angular-CLI: "6.0.8" Angular-Compiler-CLI: "6.0.7" Typescript: "2.7.2" MDB-Angular-Pro: "6.2.2" NPM: "6.1.0" [1] https://mdbootstrap.com/support/toast-alter-not-properly-displaying-when-called-from-sse-callback/ [2] https://mdbootstrap.com/support/alert-is-just-a-white-box/

---