39

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 the error:

No provider for MatDialogRef

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>
2
  • 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
    Oct 11, 2017 at 11:14
  • I did that now..I still get the same error :( Oct 11, 2017 at 11:26

6 Answers 6

45

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.

3
  • 2
    Thanks Javier, this was killing me and your answer fixed it Feb 24, 2020 at 14:46
  • 2
    Thanks Javier, I really hate that aspect of angular. It's like the errors are intentionally vague
    – Rickless
    Jul 19, 2020 at 20:52
  • 1
    Thanks Javier. This fixed the problem for me.
    – TheZerg
    Oct 5, 2020 at 20:14
36

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

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

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);
 }

}
12
  • 1
    I imported the module and the dialog is working when I remove MatDialogRef from the constructor..I wanna know why it stops working when I import that :( Oct 11, 2017 at 11:06
  • 1
    @kashifroshen have you added your components (where you import MatDialogRef) to entryComponents in module declaration? Oct 11, 2017 at 11:08
  • Yeah I did that as well :/ :/ Oct 11, 2017 at 11:10
  • I found the solution..instead of giving it to the DialogOverviewExample constructor it should be given to the DialogOverviewExampleDialog constructor..the error is gone now..I am calling the changePosition inside that class but still the position is not getting updated for some reason. Oct 11, 2017 at 11:37
  • 1
    I have the same issue, but I imported MatDialogModule. How do I fix this? Oct 15, 2017 at 23:36
15

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';
2
  • 1
    I was breaking my head for the error source. The point "Correct Import: '@angular/material'" worked for me. Thanks mate.
    – Hari
    Nov 15, 2019 at 12:42
  • 3
    Components can no longer be imported through "@angular/material". Use the individual secondary entry-points, such as @angular/material/button. Aug 25, 2020 at 19:06
7

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.

1
  • Good point, I had the same problem when doing a refactor and moved the logic responsible for opening a dialog from a component to a service, so I simply copied the dialogRef into the service constructor, which is a copy-paste mistake. Moving the dialogRef outside of the service constructor fixed the issue.
    – FreeFend
    Jan 18, 2021 at 10:34
6

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!

3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.