Why isn't the close function working? It seems like dialogRef.close() is undefined.
Below is the code snippet:
<button mat-raised-button (click)="openModal()">Open Project Specifics</button>
TS
openModal(){
let dialogRef = this.dialog.open(ProjectSpecificContentComponent, {
data:{projectsSpecifics: this.projectSpecific},
panelClass: 'project-content-dialog'
})
dialogRef.afterClosed().subscribe(result => console.log(result))
}
This is the Component:
<button mat-dialog-close>X</button>
<div class="container">
<div class="project-specific" *ngFor="let projectS of projectSpecificList">
<h5>{{projectS.name}}</h5>
<mat-form-field appearance="fill" class="mat-group">
<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>
TS
constructor(@Inject(MAT_DIALOG_DATA) public data: any,
public dialogRef: MatDialogRef<ProjectSpecificContentComponent>,
) { }
onClose(){
this.dialogRef.close();
}
This is where the component is imported:
imports[MatDialogModule]
entryComponents: [ProjectSpecificContentComponent]