For some reason, I am facing an issue with closing a dialog window in Angular Material using mat-dialog-close.
I have ensured that my NgModule has BrowserAnimationModule and MatDialogModule included after checking online resources.
Your assistance with the provided code would be greatly appreciated.
ModalDialog.html
<div mat-dialog-actions>
<button mat-button mat-dialog-close>Cancel</button>
</div>
<div class="modal-container">
<h1 mat-dialog-title>{{ data }}</h1>
</div>
Register.component.ts
import { Component, Inject, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { states } from '../constants/states';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css'],
})
export class RegisterComponent implements OnInit {
constructor(public dialog: MatDialog) {}
// Function to open the modal for consent form
openModal() {
this.dialog.open(ModalDialog, {
data: `Some random Data`
});
}
ngOnInit(): void {}
}
// Modal code from angular material
@Component({
selector: 'modal-dialog',
templateUrl: 'ModalDialog.html',
styleUrls: ['./register.component.css'],
})
export class ModalDialog {
constructor(@Inject(MAT_DIALOG_DATA) public data: string) {}
}
register.html
<div class="row-five">
<mat-checkbox></mat-checkbox>
<p>
I have read this
<span
(click)="openModal()"
style="color: blue; text-decoration: underline; cursor: pointer"
>consent form</span
>
and I fully understand the contents of this document and voluntarily
consent to participate in this camp*
</p>
</div>
Edit Versioning of libraries.
Package.json
"dependencies": {
"@angular/animations": "~13.3.0",
"@angular/cdk": "^13.3.7",
"@angular/common": "~13.3.0",
"@angular/compiler": "~13.3.0",
"@angular/core": "~13.3.0",
"@angular/forms": "~13.3.0",
"@angular/material": "^13.3.7",
"@angular/platform-browser": "~13.3.0",
"@angular/platform-browser-dynamic": "~13.3.0",
"@angular/router": "~13.3.0",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
Edit Attempting to use it as an element caused this error.
<mat-dialog-actions>
<button mat-button mat-dialog-close>Cancel</button>
</mat-dialog-actions>
<div class="modal-container">
<h1 mat-dialog-title>{{ data }}</h1>
</div>
I encountered the following error message:
'mat-dialog-actions' is not a known element:
1. If 'mat-dialog-actions' is an Angular component, then verify that it is part of this module.
2. If 'mat-dialog-actions' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ngtsc(-998001)