Angular Material Dialog dialogref.close() not working-CodePudding

the close isnt working, the dialogRef.close() is undefined??

Here is the code template

   <button  mat-raised-button (click)="openModal()">Open Project Specifics</button>

  openModal(){
   let dialogRef = this.dialog.open(ProjectSpecificContentComponent, {
   data:{projectsSpecifics: this.projectSpecific},
      panelClass: 'project-content-dialog'
 })
     dialogRef.afterClosed().subscribe(result => console.log(result))
  }

here is the called Component

    <button mat-dialog-close>X</button>

              <div >
                <div  *ngFor="let projectS of projectSpecificList">
               <h5>{{projectS.name}}</h5>
                <mat-form-field appearance="fill" >
                 <mat-label>Add project specific</mat-label>
          <mat-select multiple>
            <mat-option *ngFor="let item of getContent(projectS)">{{item.content}}</mat- 
            option>
          </mat-select>
        </mat-form-field>
         </div>

       </div>
       <div mat-dialog-actions>
         <button (click)="onClose()" mat-raised-button>Done!</button>
       </div>

and TS

           constructor(@Inject(MAT_DIALOG_DATA) public data: any,
             public dialogRef: MatDialogRef<ProjectSpecificContentComponent>,
                 ) { }



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

Also here you can see the module where i imported the component

   imports[MatDialogModule]
   entryComponents: [ProjectSpecificContentComponent]

CodePudding user response：

My dialog code(TS) is like this:

export class DialogFormComponent implements OnInit {
/**
  * @param {MatDialogRef<DialogFormComponent>} matDialogRef
  */
constructor(
    public matDialogRef: MatDialogRef<DialogFormComponent>, 
  )

  onClose(){
   this.MatDialogRef.close();
  }
 
}

You can try the same way

CodePudding user response：

Step 1:

public dialogRef: MatDialogRef<any>,

add this in your constructor

Step 2: after defining material dialog, assign your local variable dialogRef to global this.dialogRef variable

this.dialogRef = dialogRef;

step 3: now execute this.dialogRef.close()

Hope this will work for you.