I have a global Errorhandler in which I process Client- and Server-Errors.

To provide a feedback for the user I want to open a modal which returns the error-message.

Therefore I've implemented a modal:

import {Component} from '@angular/core';
import {BsModalRef, BsModalService} from 'ngx-bootstrap';
import {Button} from '../../layout-models/button.model';

@Component({
  selector: 'error-modal',
  templateUrl: './error-modalponent.html',
  styleUrls: ['./error-modalponent.scss']
})
export class ErrorModalComponent {
  title: string;
  buttonTitle = 'OK';
  type: 'error';
  button: Button;

  protected modalRef: BsModalRef;

  constructor(protected modalService: BsModalService) {}

  public show(title: string, message: string) {
    this.title = title;
    this.modalRef = this.modalService.show(
      message,
      Object.assign({}, { class: `modal-banner ${this.type}`})
    );
  }

  hide() {
    if (this.modalRef) {
      this.modalRef.hide();
    }
  }
}

In my Notification-Service:

import {Injectable, NgZone} from '@angular/core';
import { ErrorModalComponent } from '../error-modalponent';

@Injectable({
  providedIn: 'root'
})
export class NotificationService {

  public errorModalComponent: ErrorModalComponent;

  showError(title: string, message: string): void {
     this.errorModalComponent.show(title, message);
  }
}

Which leads to Uncaught TypeError: Cannot read property 'show' of undefined

I feel like I am doing some fundamental mistake - the main purpose of this is to have a centralized modal. Is this possible or do I need to use the ModalComponent in every Component in which I want to show the error-handling-modal?

I have a global Errorhandler in which I process Client- and Server-Errors.

To provide a feedback for the user I want to open a modal which returns the error-message.

Therefore I've implemented a modal:

import {Component} from '@angular/core';
import {BsModalRef, BsModalService} from 'ngx-bootstrap';
import {Button} from '../../layout-models/button.model';

@Component({
  selector: 'error-modal',
  templateUrl: './error-modal.ponent.html',
  styleUrls: ['./error-modal.ponent.scss']
})
export class ErrorModalComponent {
  title: string;
  buttonTitle = 'OK';
  type: 'error';
  button: Button;

  protected modalRef: BsModalRef;

  constructor(protected modalService: BsModalService) {}

  public show(title: string, message: string) {
    this.title = title;
    this.modalRef = this.modalService.show(
      message,
      Object.assign({}, { class: `modal-banner ${this.type}`})
    );
  }

  hide() {
    if (this.modalRef) {
      this.modalRef.hide();
    }
  }
}

In my Notification-Service:

import {Injectable, NgZone} from '@angular/core';
import { ErrorModalComponent } from '../error-modal.ponent';

@Injectable({
  providedIn: 'root'
})
export class NotificationService {

  public errorModalComponent: ErrorModalComponent;

  showError(title: string, message: string): void {
     this.errorModalComponent.show(title, message);
  }
}

Which leads to Uncaught TypeError: Cannot read property 'show' of undefined

I feel like I am doing some fundamental mistake - the main purpose of this is to have a centralized modal. Is this possible or do I need to use the ModalComponent in every Component in which I want to show the error-handling-modal?

• javascript
• angular
• error-handling
• modal-dialog
• inject

Share Improve this question Follow edited Oct 30, 2019 at 14:36 codlix asked Oct 30, 2019 at 14:25 codlixcodlix 89811 gold badge1010 silver badges2828 bronze badges 4

• 1 You can use an observable in your service to determine when to show and hide the modal. The modal would be at the root of the (app.ponent). In the app.ponent.ts you would subscribe to that observable and show/hide the modal based on the value received from the subscription. – Jason White Commented Oct 30, 2019 at 14:43
• Can you please offer a simple example? This would help me a lot - I'm not that familiar with subscribtions because I am pretty new to angular! – codlix Commented Oct 30, 2019 at 14:46
• 1 Here is a rough idea, you'll probably have to make changes. stackblitz./edit/angular-9vnzma – Jason White Commented Oct 30, 2019 at 15:16
• Check this: gist.github./jnizet/15c7a0ab4188c9ce6c79ca9840c71c4e – yazantahhan Commented Oct 30, 2019 at 15:20

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

I wouldn't use ngx-modal I would use NgbModal

What yazantahhan means is something like this:

import {Injectable} from "@angular/core";
import {NgbModal, NgbModalRef} from "@ng-bootstrap/ng-bootstrap";

@Injectable()
export class ErrorModalService {

  title: string;
  buttonTitle = "OK";
  type: "error";

  protected modalRef: NgbModalRef;

  constructor(protected modalService: NgbModal) {}

  public show(title: string, message: string) {
    this.title = title;
    this.modalRef = this.modalService.open(
      message
    );
  }

  hide() {
    if (this.modalRef) {
      this.modalRef.close();
    }
  }
}

Then inject and use it like this:

import { Component } from "@angular/core";
import {ErrorModalService} from "./ErrorModalService";

@Component({
  selector: "app-root",
  templateUrl: "./app.ponent.html",
  styleUrls: ["./app.ponent.scss"]
})
export class AppComponent {
  title = "testAngular";

  constructor(
    private errorModalService: ErrorModalService,
  ) {}


  showError() {
    this.errorModalService.show("title", "message");
  }
}

Don't forget to provide the service in your module

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.ponent";
import {ErrorModalService} from "./ErrorModalService";
import {BsModalService} from "ngx-bootstrap/modal";
import {NgbModule} from "@ng-bootstrap/ng-bootstrap";

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
  ],
  providers: [
    ErrorModalService,
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }