ERROR TypeError: Cannot read property 'openDialogTEST' of undefined

Question

I'm trying to make a dialog box popup whenever I get an error from myerrorhandler I can see the console.error(this.explanation) call but not the this.dialogbox.openDialogTEST();

this is my error message

ERROR TypeError: Cannot read property 'openDialogTEST' of undefined

the weird part is if I call it with a button everything is ok. This is my classes:

usertable.component.ts

  connect(): Observable<Installation[]> {

    return this.authservice.GetInstallation();
  }

auth.service.ts

  GetInstallation(): Observable<Installation[]> {
    return this.GetServiceProviderId().pipe(
      flatMap(info => {
        return this.http.get<Installation[]>
          (this.rooturl +
          "installation/?serviceproviderid=" +
          info.ServiceProviderId,
          { headers: this.reqHeader })
      }),
       catchError(this.myerrorhandle.handleError)
    )
  }

myerrorHandle.ts

 handleError(errorResponse: HttpErrorResponse) {

    switch (errorResponse.status) {
      case 401: {
        console.error(errorResponse.url, errorResponse.status, errorResponse.statusText)
        this.explanation = "The request has not been applied because it lacks valid authentication credentials for the target resource."
        console.error(this.explanation)
        this.dialogbox.openDialogTEST();
        break;
      }

dialogbox.component.ts

  openDialogTEST(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log("after close")
    });
  }

full error message:

ERROR TypeError: Cannot read property 'openDialogTEST' of undefined at CatchSubscriber.push../src/app/myerrorHandle.ts.myerrorHandle.handleError [as selector] (myerrorHandle.ts:29) at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:33) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80) at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60) at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80) at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60) at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/OuterSubscriber.js.OuterSubscriber.notifyError (OuterSubscriber.js:13) at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._error (InnerSubscriber.js:18)

I'm sorry still new to angular. What I was thinking this method will call the openDialogTEST() in the DialogboxComponent class and then open the diablog box — Ole Bark

Akj Akj · Accepted Answer · 2018-08-30T09:36:58

Use Service to handle dialog like this:

Please Refer Demo for more details

DEMO

dailogbox.service .ts:

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material';
import { DialogOverviewExampleDialog } from './dialog-overview-example'

@Injectable()
export class DialogboxopenService {
  constructor(
    private commonModel: MatDialog
  ) { }

  public openmodel(title: string): Observable<boolean> {
    let ModelRef: MatDialogRef<DialogOverviewExampleDialog>;
    ModelRef = this.commonModel.open(DialogOverviewExampleDialog,
      { width: '50%' }
    );
    ModelRef.componentInstance.data = title;
    return ModelRef.afterClosed();
  }
}

in auth.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { DialogboxopenService } from './dialogboxopen.service';

@Injectable()
export class AuthService {
  constructor(private dailogbox: DialogboxopenService, private http: HttpClient) { }

  signIn() {
    this.http.get('https://urlnotfound/sas').subscribe(response => {
      console.log(response)
    }, (error: HttpErrorResponse) => {
      this.handleError(error);
    })
  }
  handleError(errorResponse: HttpErrorResponse) {
    switch (errorResponse.status) {
      case 0:
        let m1 = `The request has not been applied because url not found status code  ${errorResponse.status}`
        this.dailogbox.openmodel(m1);
        break;

      case 500:
        let m2 = `The request has not been applied because Internal Server Error Status Code : ${errorResponse.status} `
        this.dailogbox.openmodel(m2);
        break;
    }
  }
}

ERROR TypeError: Cannot read property 'openDialogTEST' of undefined

1 Answers