Angular 4/5 Uncaught Error: Template parse errors: Can't bind to 'mat-dialog-close' since it isn't a known property of 'button'

Question

this has happened when I tried to follow the dialog tutorial from https://material.angular.io/components/dialog/overview and I'm getting the error above so if anyone has an idea of what I should do to solve this problem?

here is my code : the html for the modal

<h1 mat-dialog-title>Warning</h1>

<div mat-dialog-content>
  <p>Are you sure you want to delete the book {{data.title}} ?</p>

</div>
<div mat-dialog-actions>
  <button mat-button [mat-dialog-close]="data.title" tabindex="2">Ok</button>
  <button mat-button (click)="onNoClick()" tabindex="-1">No Thanks</button>
</div>

the class that active the modal:

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
@Component({
  selector: 'app-remove-book',
  templateUrl: './remove-book.component.html',
  styleUrls: ['./remove-book.component.scss']
})
export class RemoveBookComponent implements OnInit {


  constructor(
    public dialogRef: MatDialogRef<RemoveBookComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

  onNoClick(): void {
    this.dialogRef.close();  
  }


  ngOnInit() {
  }

}

and the method in the class that supposes to active the modal:
  removeContact(i){ 


    let dialogRef = this.dialog.open(RemoveBookComponent, {
      width: '250px',
      data: { ok: this.ok, title: this.contactsArr[i].title }
    });

    dialogRef.afterClosed().subscribe(result => { 

      console.log('The dialog was closed');

        this.contactsArr.splice(i,1);


    });


      }

I did all the required imports and it should work if someone can help I would appreciate it very much.

thanks.

Answer 1

There are two things you need to look out for

1. make sure you import MatDialogModule into the module where you are using the dialog.
2. make sure that the dialog component is added to declaration in your module.

Answer 2

also you have to make sure that your dialog component is declared in app.module.ts