CODEWITHSUNDEEP
angularangular-material
Testing Anurag
Testing Anurag

Reputation: 643

MatDialog dialog from Angular Material is not closing

I am working on Angular 6 Application where I am using Angular material dialog box. I am trying to close the dialog box on success after the data is sent successfully to the server. I used

this.dialogRef.close(0);

or

this.dialogRef.close(0);

or

this.dialogRef.close();

but it is still not working.

component1.ts

let NewRegDialog = this.dialog.open(NewRegistrationComponent, {

  width: '750px',
  height: '500px',
  //disableClose: true,
  data: {
    email : email,
    regType : regType,
  },
});

NewRegDialog.afterClosed().subscribe(result => {

  if(result == 1){
    this.dialogRef.close('signup');
  }else{
    alert('Login failed') ;
    });

component2.ts

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

    
   ... .. 
   .. .. 
    
      constructor( private restapi: ServicesService , private dialog: MatDialog ,   public dialogRef: MatDialogRef<NewRegistrationComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any ) {
    
   ...
   ..... 
   }
    
    
     user_signup(data) {
    
    
          let userData = {Email: this.email };
          this.restapi.signupUsingSocial(userData).then(
            result => {
              this.responseData = result;
    
              if (this.responseData.status == 1) {
                localStorage.setItem('token', this.responseData.data);
                this.dialogRef.close(1);
    
              } else {
                alert('give proper input');
              }
            },
            err => {
              this.dialogRef.close(0);
            }
          );}}

Upvotes: 23

Views: 45210

Answers (10)

Vinay Somawat
Vinay Somawat

Reputation: 667

I resolved the issue by making sure to import MatDialogModule in my NgModule.

Upvotes: 0

alonso
alonso

Reputation: 311

I had the same problem, and i resolved using NgZone, i read the Angular NgZone documentation: https://angular.io/api/core/NgZone

The error is because you try to execute a function outside of the Angular context, so the changes don't show in the user view correctly because it's outside the context. I had that problem because it's an asynchronous function and Angular is waiting for an answer, and the view doesn't show the changes until that answer. That's what I understand when I read the documentation for NgZone.The solution is to wrap this operation inside ngZone.run(), you make sure that it runs inside Angular's change detection cycle and reflects the corresponding changes in the view. This is especially useful if you're using NgZone in a context where asynchronous events are out of scope for Angular.

This is my code for that:

import { Component, OnInit, Inject, NgZone } from "@angular/core";
constructor(
    public app: App,
    public service: EstadisticasOrdenesCompraServices,
    private ngZone: NgZone,
    public dialogRef: 
    MatDialogRef<OrdenesCompraEstadisticasDetalle>,
    @Inject(MAT_DIALOG_DATA) public data: any) {
    this.title = this.data.titulo;
    this.listaparametros = data.listaparametros;
    this.filtros = data.filtros;
}

onNoClick(): void {
    this.ngZone.run(() => {
        this.dialogRef.close();
    });
}

Upvotes: 1

Jared Black
Jared Black

Reputation: 1

On older versions of Angular, make sure you add BrowserAnimationsModule to imports in app.module.ts:

  imports: [
    ...
    MatDialogModule,
    BrowserAnimationsModule,
    ...
  ]

Upvotes: 0

Leandro Biciato
Leandro Biciato

Reputation: 11

Since in my case, i was just following the Material docs, i didn't import the dialog Component on app.module so the fix was importing the dialog Component on app.module

Upvotes: 0

Nicola Di Lillo
Nicola Di Lillo

Reputation: 1910

You have this error because you open the dialog outside the NgZone.

An easy fix is to import the NgZone in the constuctor:

constructor(public dialogRef: MatDialogRef<ModalComponent>, private ngZone: NgZone) { }

and then run the code in the NgZone

onNoClick(): void {
  this.ngZone.run(() => {
    this.dialogRef.close();
  });
}

this article explains what is an NgZone: https://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html

Upvotes: 48

Josh
Josh

Reputation: 239

For me, the solution was to ensure I was importing BrowserAnimationsModule in my NgModule.

Upvotes: 9

Llama D&#39;Attore
Llama D&#39;Attore

Reputation: 437

If you have an error occurring in the ngOnChanges of another component it can cause this un-closable dialog behavior.

Upvotes: 0

Juan Pablo G
Juan Pablo G

Reputation: 959

I spent many hours in this and what I figured out was that inside my popout I had a form that was triggering a error in the javascript on chrome console . When I resolved this form error my popup was able to close. My suggestion to you to solve this is error is that you can try to replace the content from your modal by a basic one to test the close button functionality.

Go to https://material.angular.io/components/dialog/examples then select examples tab then check the code of the first sample in the button <>. Then replace the contet of your popup by the one from dialog-content-example-dialog.html

The should be solved now, I hope this works for your

Regards,

Juan

Upvotes: 0

Wandrille
Wandrille

Reputation: 6801

You can try :

 <div mat-dialog-actions>
    <button (click)="close()">close</button>
 </div>

and in your ts:

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

Upvotes: 1

user3804427
user3804427

Reputation: 442

You can close dialog from component where you have 

let NewRegDialog = this.dialog.open(NewRegistrationComponent, {

In your example component1 have dialog.open method. Why you try close in component2?

Upvotes: -1

Related Questions