CODEWITHSUNDEEP
javascripthtmlcssangularangular-material
Brien
Brien

Reputation: 103

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

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>

Upvotes: 5

Views: 11581

Answers (2)

LuizaCerchiari
LuizaCerchiari

Reputation: 1

Replace MatDialogModule with MatDialog

constructor(

public dialog: MatDialog

)

Upvotes: -1

Sajeetharan
Sajeetharan

Reputation: 222582

_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){}

Upvotes: 11

Related Questions