29
votes

I am using material 2 version 2.0.0-beta.12. I need to adjust the position of the material Modal. I followed this answer to do that. https://stackoverflow.com/a/44238699/8253445 Since MdDialog is not available now I used {MatDialog, MatDialogRef, MAT_DIALOG_DATA}.

constructor(public dialog: MatDialog,public dialModRef:MatDialogRef<any>) {}

When I add MatDialogRef to my constructor it gives me " No provider for MatDialogRef" error. Please can you help me to figure this out?

dialog-overview-example.ts

import {Component, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from 
'@angular/material';

@Component({
   selector: 'dialog-overview-example',
   templateUrl: 'dialog-overview-example.html'
})
export class DialogOverviewExample {

   animal: string;
   name: string;

   constructor(public dialog: MatDialog,public 
   dialModRef:MatDialogRef<any>) {}

   openDialog(): void {
       let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
        width: '500px',
        data: { name: this.name, animal: this.animal }
   });

   dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
   });
 }
}

@Component({
   selector: 'dialog-overview-example-dialog',
   templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

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

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

}

app.module.ts

entryComponents: [DialogOverviewExample,DialogOverviewExampleDialog]

dialog-overview-example-dialog.html

<h1 md-dialog-title>Hi {{data.name}}</h1>
<div md-dialog-content>
  <p>What's your favorite animal?</p>
  <md-form-field>
    <input mdInput tabindex="1" [(ngModel)]="data.animal">
  </md-form-field>
</div>
<div md-dialog-actions>
  <button md-button tabindex="2">Ok</button>
  <button md-button (click)="onNoClick()" tabindex="-1">No Thanks</button>
</div>
6
instead of any, give the name of the Component class you want to open in dialog. Then, add the component class in your entryComponents.Faisal
I did that now..I still get the same error :(kashif roshen

6 Answers

37
votes

You will get that exact

No provider for MatDialogRef

error in case you include your dialog's component html selector in dialog-overview-example.html like <dialog-overview-example-dialog></dialog-overview-example-dialog>

There is no need for that, do not include the html selector of the dialog component anywhere.

27
votes

You need to import this module in your module file (app.module.ts by default):

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

and add MatDialogModule to imports in your module declaration:

@NgModule({
  declarations: [...],
  imports: [
    ...
    MatDialogModule,
    ...
  ],
  providers: [...],
  entryComponents: [...],
  bootstrap: [...]
})

EDIT:

You need to pass data through this.dialogRef.close(); to get result in subscribe working. For example:

@Component({
   selector: 'dialog-overview-example-dialog',
   templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {
someValue: boolean = false;

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

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

}
10
votes

Update 2021

The Angular bug that caused the error No provider for MatDialogRef when importing from @angular/material/dialog has been fixed.

The correct way to import MatDialogRef is once again to use the specific component entry point:

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

Angular Material Module

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

@NgModule({
  exports: [
    MatDialogModule,
    ...
  ]
})
export class MyMaterialModule {}

 

Original Answer September 2019

Many of the Angular Material examples show the MatDialogRef import as:

import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
This will cause the following **error** (for example, when creating a Service to wrap the creation of Dialog Components):
ERROR NullInjectorError: StaticInjectorError(AppModule)[DialogComponent -> MatDialogRef]: 
  StaticInjectorError(Platform: core)[DialogWarningComponent -> MatDialogRef]: 
    NullInjectorError: No provider for MatDialogRef!

Correct Import: '@angular/material'

import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
6
votes

The issue is that you are including your <dialog-component></dialog-component> in your code somewhere as well as injecting it into your view with @Inject. If you remove your <dialog-component></dialog-component> from whichever template.html you had it in, It will work!

5
votes

You injected MatDialogRef in the constructor of DialogOverviewExample component that opens your dialog, but it is not a dialog.

MatDialogRef can be inject only in components opened as dialog, other way there is no dialogRef so this error is triggered.

3
votes

Remove MatDialogRef from DialogOverviewExample component. You don't need it there. It should work then.