title: Angular 6 Error handling - how to display error in modal?
body: <p>I'm trying to display errors in a modal dialog but I'm a total Angular newbie and I'm stuck.</p>
  <p>The project already uses bootstrap so I've tried using NgbModal:</p>
  <pre><code>    // in ErrorHandler
  
      handleError(error: Error) {
      
      //do other stuff
  
      console.error(error);
      
      this.modalService.open(ErrorDisplayComponent, //problems here
            {
            //modal options
            });
      }
  </code></pre>
  <p>This causes an error:</p>
  <pre><code>Uncaught TypeError: Cannot read property 'open' of undefined
  at NgbModal.push../node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js.NgbModal.open
  </code></pre>
  <p>It seems like the open method is not happy with the ErrorDisplayComponent parameter.</p>
  <p>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).</p>
  <p>According to the documentation (<a href="https://ng-bootstrap.github.io/#/components/modal/api" rel="nofollow noreferrer">https://ng-bootstrap.github.io/#/components/modal/api</a>) &quot;Content [for the open() method] can be provided as a TemplateRef or a component type.&quot;</p>
  <p>Perhaps I should try with the TemplateRef option (but I have no idea how to create a TemplateRef on the fly) or <strong>perhaps this approach is wrong and I should be doing something else</strong>. But since I don't even know the lingo, googling for an answer is not that easy.</p>
  <p>Any ideas?</p>
  <p>Thanks in advance!</p>
  <p><strong>UPDATE: Complete code</strong></p>
  <p><strong>ErrorsHandler.ts</strong></p>
  <pre><code>    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 : &quot;newUserModalClass&quot; });
      }
  }
  </code></pre>
  <p><strong>error-display.component.ts</strong></p>
  <pre><code>    import { Component, OnInit } from '@angular/core';
  import {NgbActiveModal} from &quot;@ng-bootstrap/ng-bootstrap&quot;;
  
  @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);
        }
      }
  </code></pre>
  <p><strong>error-display.component.html</strong></p>
  <pre><code>&lt;ng-template #content let-modal&gt;
    &lt;h1&gt;error-display works!&lt;/h1&gt;
  &lt;/ng-template&gt;
  </code></pre>