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

I am opening Modal popup in Angular 4 using Material. whereas it is opening properly but I am not able to close it using dialogRef.close(). I am opening AdminComponent as a popup by clicking on button which is present on Home.Component.html.

Admin.Component.ts- `import {MdDialog} from ‘@angular/material’; import {MdDialogRef} from ‘@angular/material’;

export class AdminComponent implements OnInit { constructor( public dialogRef:MdDialogRef <AdminComponent>, private emergencycontacts: EMTServiceService) { } closeModal() { console.log(‘closing’); this.dialogRef.close(); } }`

Admin.Component.html- <td md-dialog-actions> <button md-raised-button (click)="closeModal()" class="btncancel" >Cancel</button></td>

Please help

[willshowell]

@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();            
      }
    });
  });        
}

[willshowell]

@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 😄