'Angular 6 Error handling - how to display error in modal?
I'm trying to display errors in a modal dialog but I'm a total Angular newbie and I'm stuck.
The project already uses bootstrap so I've tried using NgbModal:
// in ErrorHandler
handleError(error: Error) {
//do other stuff
console.error(error);
this.modalService.open(ErrorDisplayComponent, //problems here
{
//modal options
});
}
This causes an error:
Uncaught TypeError: Cannot read property 'open' of undefined
at NgbModal.push../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js.NgbModal.open
It seems like the open method is not happy with the ErrorDisplayComponent parameter.
Even if that worked, I don't know how to pass the error variable to ErrorDisplayComponent (but I'll deal with that if I get this to work).
According to the documentation (https://ng-bootstrap.github.io/#/components/modal/api) "Content [for the open() method] can be provided as a TemplateRef or a component type."
Perhaps I should try with the TemplateRef option (but I have no idea how to create a TemplateRef on the fly) or perhaps this approach is wrong and I should be doing something else. But since I don't even know the lingo, googling for an answer is not that easy.
Any ideas?
Thanks in advance!
UPDATE: Complete code
ErrorsHandler.ts
import { ErrorHandler, Injectable, Injector} from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ErrorDisplayComponent } from './errors/error-display/error-display.component';
@Injectable()
export class ErrorsHandler implements ErrorHandler {
constructor(private modalService: NgbModal) {
}
handleError(error: Error) {
//console.error(error);
this.modalService.open(ErrorDisplayComponent,
{ ariaLabelledBy: 'modal-basic-title', centered: true, size: 'lg',
windowClass : "newUserModalClass" });
}
}
error-display.component.ts
import { Component, OnInit } from '@angular/core';
import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
@Component({
selector: 'app-error-display',
templateUrl: './error-display.component.html',
styleUrls: ['./error-display.component.scss']
})
export class ErrorDisplayComponent implements OnInit {
constructor(public activeModal: NgbActiveModal) {
}
ngOnInit() {
}
onClose():void {
this.activeModal.close('closed');
}
onDismiss(reason : String):void {
this.activeModal.dismiss(reason);
}
}
error-display.component.html
<ng-template #content let-modal>
<h1>error-display works!</h1>
</ng-template>
Solution 1:[1]
I had this problem few days ago, I found a solution, so in case somebody runs into this problem, what you could do to try to solve it is to inject modalService: NgbModal at run time in stead of using the constructor. In this specific case, the injection can be implemented in the next way:
import { ErrorHandler, Injectable, Injector} from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ErrorDisplayComponent } from './errors/error-display/error-
display.component';
@Injectable()
export class ErrorsHandler implements ErrorHandler {
private modalService: NgbModal
constructor(private injector: Injector) {
}
handleError(error: Error) {
this.modalService = this.injector.get(NgbModal);
//console.error(error);
this.modalService.open(ErrorDisplayComponent,
...
In my case I was calling modalService from another service but I had the same error, it seems that the _modalStack: NgbModalStack property from NgbModal was getting undefined value, so when I injected at run time the service was defined.
I hope this can help somebody running into this problem.
You can read next documentation to understand better NgbModal functionallity and class composition for NgbModal
https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/modal/modal.ts
https://ng-bootstrap.github.io/#/components/modal/examples
Kind regards,
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | webtechnelson |