I unable to open dialog is in angular project

Question

Hi when on click on opendialog() buttton it doesnt open new dialog no response and now error shown in console angular 7 project i am using material UI

Ts file
@Component({
  selector: "passport",
  templateUrl: "passport.html",
})
export class passportDialog {
  dialog: any;
  constructor(
    public dialogRef: MatDialogRef<passportDialog>,
    public matdialog: MatDialog,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}

  public openDialog() {
    console.log("inside open dialog function");
    this.dialogRef = this.dialog.open(passportDialog, {
      disableClose: true,
      width: 200,
      height: 200,
    });
  }
}

<div
       <div
        style="cursor: pointer"
        fxLayout="row"
        fxLayoutAlign="end center"
        class="passwordValidtion"
        *ngIf="!masterInfo?.EMP_DATA?.passport_no"
        (Click)="openDialog()"
      >
        No Passport details available
      </div>

When I click on open dialog it doesn't respond and open

Answer 1

You have to do:

this.matdialog.open(...)

Usually you open a dialog from another component. I see you try to open the dialog from within the dialog class, I don't think that makes sense. Check out the example in material docs.