41

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>
Christopher Peisert
  • 21,862
  • 3
  • 86
  • 117
kashif roshen
  • 435
  • 1
  • 5
  • 9

7 Answers7

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.

Milo
  • 3,365
  • 9
  • 30
  • 44
Javier Aviles
  • 7,952
  • 2
  • 22
  • 28
38

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

}
Community
  • 1
  • 1
Piotr Pliszko
  • 676
  • 5
  • 9
  • 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 :( – kashif roshen Oct 11 '17 at 11:06
  • 1
    @kashifroshen have you added your components (where you import `MatDialogRef`) to `entryComponents` in module declaration? – Piotr Pliszko Oct 11 '17 at 11:08
  • Yeah I did that as well :/ :/ – kashif roshen Oct 11 '17 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. – kashif roshen Oct 11 '17 at 11:37
  • @kashifroshen how do you call `changePosition`? Do you use `this.dialogRef.close(...)`? – Piotr Pliszko Oct 11 '17 at 11:39
  • I called it inside the constructor..and yes I am using that..you can see that at the end of the code snippet of dialog-overview-example.ts I have included in the question. – kashif roshen Oct 11 '17 at 11:44
  • would that help in altering the position of the modal? – kashif roshen Oct 11 '17 at 11:52
  • @kashifroshen in your code you have `this.animal = result`, but without passing data through `this.dialogRef.close(...);`, `result` will be null. What functionality will modal have? Is it some kind of animal chooser with buttons for animals? Post .html template for this component please. – Piotr Pliszko Oct 11 '17 at 11:54
  • added it :) it is just the example modal in the provided in the material 2 site..i want to get it centered in the page..but it is on the far left side – kashif roshen Oct 11 '17 at 11:59
  • If it's on the left side, you probably have custom css that modify it - default css for modal keeps it centered. – Piotr Pliszko Oct 11 '17 at 12:01
  • I didn't apply any styles for the component :/ plus I checked it from the browser..there was no style to pin it to the left though – kashif roshen Oct 11 '17 at 12:14
  • 1
    I have the same issue, but I imported MatDialogModule. How do I fix this? – puppeteer701 Oct 15 '17 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';
Christopher Peisert
  • 21,862
  • 3
  • 86
  • 117
  • 1
    I was breaking my head for the error source. The point "Correct Import: '@angular/material'" worked for me. Thanks mate. – Hari Nov 15 '19 at 12:42
  • 3
    Components can no longer be imported through "@angular/material". Use the individual secondary entry-points, such as @angular/material/button. – ChumiestBucket Aug 25 '20 at 19:06
8

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.

j3ff
  • 5,719
  • 8
  • 38
  • 51
  • 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 '21 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.

scharlo
  • 56
  • 4
0

I faced to that issue in 2023 in application which is based on Angular 15.

The change of an import path solved problem. Try this:

import { MatLegacyDialogRef as MatDialogRef, MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/legacy-dialog';

then constructor stays the same:

  constructor(
    public myDialogRef: MatDialogRef<UserDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public modalData: any
  ) {}

Hope this helps.

johannesMatevosyan
  • 1,974
  • 2
  • 30
  • 40