Error Dialog does not show details

[Partha Majumdar]

Dear Sir/Madam,

I have put an additional field in the data containing the details. When the dialog display, the details are not shown. When I check the variable containing details, it has values in it.

Please suggest what could be wrong.

Regards,

Partha

error.component.ts

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material';

@Component({
//  selector: 'app-footer',
  templateUrl: './error.component.html',
  styleUrls: ['./error.component.css']
})
export class ErrorComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: {message: string, details: string}) {}
}

error.component.html

<table border=0>
  <tr>
    <td align="center">
      <h1 mat-dialog-title>Error</h1>
    </td>
  </tr>
  <tr>
    <td align="center">
        <div mat-dialog-content>
          <textarea matInput rows=1 cols=80 readonly>{{ data.message }}</textarea>
        </div>
    </td>
    <td align="left">
      <div mat-dialog-content>
        <textarea matInput rows=5 cols=80 readonly>{{ data.details }}</textarea>
      </div>
    </td>
  </tr>
  <tr align="center">
    <td align="center" width="100%">
      <div mat-dialog-actions>
        <button mat-stroked-button mat-dialog-close color="warn">Ok!</button>
      </div>
    </td>
  </tr>
</table>

error-interceptor.ts

import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
import { Injectable } from '@angular/core';
import { MatDialog } from '@angular/material';

import { ErrorComponent } from './error/error.component';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  constructor(private dialog: MatDialog) {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    return next.handle(req).pipe(
      catchError( (error: HttpErrorResponse) => {
          if (!req.url.endsWith('?upload=1')) {
            let errorMessage = 'An unknown Error Occurred!!!';
            let errorDetails = '';
            if (error.error.message) {
              errorMessage = error.error.message;
              errorDetails = error.error.details;
            }
            this.dialog.open(ErrorComponent, {data: {message: errorMessage, details: errorDetails}});
          }
          return throwError(error);
        }
      )
    );
  }
}