Property 'open' does not exist on type 'MatDialogModule'

Question

Just beginning building Angular apps. I'm writing a small book-inventory app. I'm having trouble with the Dialog component from the Material Module. I've visited the Angular material website to check my implementation and still have not been able to get it to behave as intended. I'm having a similar problem with the snackbar component. Wondering if anyone has run across this problem before. Thanks for your help!

app.Module.ts

import {MatDialogModule } from '@angular/material/dialog';

imports:[MatDialogModule]

collection.component.ts

import {MatDialogModule, MatDialogRef } from '@angular/material/dialog';

bookDetailDialogRef: MatDialogRef<BookDetailComponent>;

constructor(private dataService: DataService, private snackBar: MatSnackBarModule,
              private _dialog: MatDialogModule, private _router: Router){}

openDialog(bookId: number): void{
    let config = {with: '650px', height: '400px', position: {top: '50px'}};
    let dialogRef = this._dialog.open(this.bookDetailDialogRef, config);
    dialogRef.componentInstance.bookId = bookId;
    dialogRef.afterClosed().subscribe(res => {this.getBooks();});
  }

collection.component.html

<button mat-button (click)="openDialog(book.id)"><i class="material-icons">
              pageview</i> Dialog</button>

Answer 1

_dialog is of type MatDialog not MatDialogModule and change MatSnackBarModule to MatSnackBar. In your constructor change it as,

constructor(private dataService: DataService, private snackBar: MatSnackBarModule,
              private _dialog: MatDialog, private _router: Router){}