Im trying to replicate this Angular Material component example in my project: https://material.angular.io/components/dialog/examples Instead I get this error: [Error: Can't resolve all parameters for MatDialog: (?, ?, ?, ?, ?, ?, ?)][1]
I've pasted my code below, it is extremely simple: TS file:
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
@Component({
selector: 'lib-custom-dialog',
templateUrl: './custom-dialog.component.html',
styleUrls: ['./custom-dialog.component.scss']
})
export class CustomDialogComponent implements OnInit {
ngOnInit() {}
constructor(public dialog: MatDialog) {}
openDialog() {
console.log("test");
const dialogRef = this.dialog.open(CustomDialogWindow);
dialogRef.afterClosed().subscribe(result => {
console.log('Dialog result: ${result}');
});
}
}
@Component({
selector: 'custom-dialog-window',
templateUrl: 'custom-dialog-window.html'
})
export class CustomDialogWindow {}
And module.ts file:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomDialogComponent } from './custom-dialog/custom-dialog.component';
import { CustomDialogWindow } from './custom-dialog/custom-dialog.component';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDialog } from '@angular/material/dialog';
import { MatDialogRef } from '@angular/material/dialog';
@NgModule({
declarations: [
CustomDialogComponent,
CustomDialogWindow,
],
imports: [
CommonModule,
],
exports: [
CustomDialogComponent,
CustomDialogWindow,
MatDialogModule,
MatDialog,
MatDialogRef,
],
providers:[
MatDialogModule,
MatDialog,
]
})
export class CustomDialogModule { }
I am using angular 12.0.3 If anyone has any ideas they would be greatly appreciated. This component is implemented in a storybook project. [1]: https://i.stack.imgur.com/Lg5F1.png