components: Not able to close modal dialog using dialogRef.close()

@krisparis can you try this in ErrorDialogContainerComponent?

constructor(
  private errorEventService: ErrorEventService,
  private errorDialog: MatDialog,
  private ngZone: NgZone) {
}

ngOnInit() {
  this.errorEventService.changeEmitted$.subscribe(errorToken => {
    this.ngZone.run(() => {
      if (errorToken && errorToken.error && (!this.errorPopupOpen)) {
        this.openDialog();            
      }
    });
  });        
}

@krisparis I think everything on Angular and Angular Material’s end is working as intended, so I wouldn’t await a fix (maybe a docs improvement here at best).

Every use case is different - I think the expected use of the ErrorHandler is to facilitate logging or extra ajax calls or similar, which don’t need to operate within the angular zone. You’ve chosen to bring the error callback into your components (material dialog), so you should do so inside the zone. If you are using errorEventService.changeEmitted$ exclusively for UI updates, I would suggest this:

@Injectable()
export class AppErrorHandler extends ErrorHandler {

  constructor(private errorEventService: ErrorEventService, private ngZone: NgZone){
    super(false);
  }

  handleError(error: any): void {
    // Bring error handling back into the zone so components are aware of error events
    this.ngZone.run(() => {
      this.errorEventService.emitChange({ error });		
    });
  }
}

But also I have only a moderate understanding of how zones work and should be utilized so take it with a grain of salt 😄

This should work out of the box. There must be some configuration problem with your code. You can also use the matDialogClose to set the button to close the dialog (I’m using the currently recommended - in beta.11 - mat instead of md prefix ):

<button mat-raised-button matDialogClose>Cancel</button>

@julianobrasil tried using matDialogClose, still not working. I replaced all md prefix with mat. Following is my Home.Component from where I am opening AdminComponent as a popup.

Home.Component.html-

<a title="Add new contact" onclick="showDiv()" (click)="openDialog()" ><img class="img-responsive" src="assets/Images/addNew.png"></a>

Home.Component.ts - `export class HomeComponent implements OnInit { dialogRef: MdDialogRef<AdminComponent>; constructor(private emergencycontacts: EMTServiceService, private router: Router, public dialog: MdDialog) { }

openDialog(){ this.dialogRef = this.dialog.open(AdminComponent); this.dialogRef.afterClosed().subscribe((result) => { console.log(result);

});

} }`

Hi,

I’m having a similar problem but the NgZone solution doesn’t work.

I’ve a simple dialog that shows a message and a QRCode and has an “OK” button to close it just for user experience.

The problem is that there’s no way to close the dialog, nothing works: clicks outside, pressing ESC key or pressing the OK button are useless.

Here’s the code:

TokenComponent where openDialog is fired on a simple FAB click.

openDialog() {
    let dialogRef = this.dialog.open(NewTokenDialogComponent, {
      disableClose: false,
      data: { userID: "a-user-id" }
    });

    dialogRef.beforeClose().subscribe((result: string) => {
      console.log('Right before close', result);
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed', result);
    });
}

Then I have this modal:

<h1 mat-dialog-title>Lorem Ipsum</h1>
<div mat-dialog-content>
  <p>
    Lorem ipsum dolor sit amet
  </p>
  <div style="text-align:center;">
    <img [src]="safeUrl" />
  </div>
</div>
<div mat-dialog-actions>
  <button mat-button [mat-dialog-close]>OK</button>
</div>

The modal gets opened but I can’t find a way to close it.

I’ve tried creating a simple StackBlitz and I realised that it actually works: https://stackblitz.com/edit/test-dialog-closing

I’m honestly confused but I think it could be related to this issue since the symptoms are similar.

Note: the close button in the example is using [mat-dialog-close], I’ve also tried matDialogClose and a custom function that calls this.dialogRef.close() which is the one used in the stackblitz.

A difference between the stackblitz and my local project is that the dialog component and the “container” component are in two separate files but I guess everything is properly included since I can see the dialog properly rendered.

Thank you!

PS: I’m a super newbie with Angular 5 and Material 2, I started my first project two days ago after a few years working with Angular 1 and no background of material design.

PPS: Do not scan the QRCode, I copy-pasted the first result from google search of “qrcode”, I do not know that’s inside 😞

Having the opposite problem here. I can close with dialogRef.close(), but not with the directive md-dialog-close. Pressing “Yes” closes the dialog, but pressing “No” doesnt.

<md-dialog-actions>
  <button 
    (click)="close()"
    md-raised-button md-dialog-close>
    Yes
  </button>
  <button md-raised-button md-dialog-close>
    No
  </button>
</md-dialog-actions>

export class EditCourseComponent implements OnInit {

  constructor(private dialogRef: MdDialogRef<EditCourseComponent>,
              @Inject(MD_DIALOG_DATA) data: any) {
    console.log('Data', data);
   }

  ngOnInit() {
  }

  close() {
    this.dialogRef.close();
  }

}