Currently, I am a beginner in Angular. I recently started integrating MatDialog into my project. To do this, I followed the code provided on the official Angular documentation page https://material.angular.io/components/dialog/overview. However, upon clicking on "Open dialog," I encountered an error.
Below is the code from my donations.component.ts
import {MatDialog, MAT_DIALOG_DATA} from '@angular/material/dialog';
export interface DialogData {
animal: 'panda' | 'unicorn' | 'lion';
}
@Component({
selector: 'app-donations',
templateUrl: './donations.component.html',
styleUrls: ['./donations.component.css']
})
export class DonationsComponent implements OnInit {
constructor(public dialog: MatDialog) {}
openDialog() {
this.dialog.open(DialogDataExampleDialog, {
data: {
animal: 'panda'
}
});
}
ngOnInit(): void {
}
}
@Component({
selector: 'dialog-data-example-dialog',
templateUrl: 'dialog-data-example-dialog.html',
})
@Injectable({ providedIn: 'root' })
export class DialogDataExampleDialog {
constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
}
Next, here is the content of my donations.module.ts
import { CommonModule } from '@angular/common';
import { DonationsComponent } from './donations.component';
import { DialogDataExampleDialog } from './donations.component';
import { DonationsRoutingModule } from './donations-routing.module';
import {MatTableModule} from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatSelectModule} from '@angular/material/select';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
import {MatMenuModule} from '@angular/material/menu';
@NgModule({
declarations: [DonationsComponent,DialogDataExampleDialog],
imports: [
CommonModule,
DonationsRoutingModule,
MatTableModule,
MatSortModule,
MatPaginatorModule,
MatFormFieldModule,
MatInputModule,
MatCheckboxModule,
MatSelectModule,
MatButtonModule,
MatIconModule,
MatMenuModule,
],
exports: [DonationsComponent],
entryComponents: [DialogDataExampleDialog],
})
export class DonationsModule{}After that, here is the structure of my donations.component.html
<button mat-button (click)="openDialog()">Open dialog</button>Last but not least, the contents of dialog-data-example-dialog.html are as follows:
<div mat-dialog-content>
My favorite animal is:
<ul>
<li>
<span *ngIf="data.animal === 'panda'">✓</span> Panda
</li>
<li>
<span *ngIf="data.animal === 'unicorn'">✓</span> Unicorn
</li>
<li>
<span *ngIf="data.animal === 'lion'">✓</span> Lion
</li>
</ul>
</div>
I would greatly appreciate any help in solving this issue.