Components: Can't bind to 'mat-dialog-close' since it isn't a known property of 'button'.

Created on 9 Dec 2017 · 5Comments · Source: angular/components

Bug, feature request, or proposal:

Hi, I'm trying to work with a tutorial about modal in angular 5 -> https://material.angular.io/components/dialog/overview
and it's not working it giving me the error
Can't bind to 'mat-dialog-close' since it isn't a known property of 'button'.

here is my HTML code:

Warning

Are you sure you want to delete the book {{data.title}} ?

thanks.

Source

orenAzuz

👍1

Most helpful comment

Did you import the MatDialogModule ? For example in your app.module.ts file

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

...

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    MatDialogModule,
  ],

ArchangelX360 on 9 Dec 2017

👍30 🚀3 ❤3 🎉3

All 5 comments

Did you import the MatDialogModule ? For example in your app.module.ts file

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

...

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    MatDialogModule,
  ],

ArchangelX360 on 9 Dec 2017

👍30 🚀3 ❤3 🎉3

WOW!!! that was the problem thank you very very much!! :)

orenAzuz on 9 Dec 2017

👍3 🎉1

I think you can close the issue as it is not Angular Material's fault ;).

ArchangelX360 on 9 Dec 2017

If you're opening a dialog with dialog.open in one module and your control is defined in another you must add the Dialog module import to both modules.

This is very easy to forget, and the dialog will open - it's just that then all dialog directives (including mat-dialog-actions / mat-dialog-title and mat-dialog-content will not work).