CODEWITHSUNDEEP
angularangular-material-7
Toheeb
Toheeb

Reputation: 1723

Angular7 Modal StaticInjectorError when I try to open angular material dialog

Each time I click the Modal Button I get the error below.

UserProfileDialog is my dialog component, 

Error: StaticInjectorError(AppModule)[UserProfileDialog -> InjectionToken MatDialogData]:    StaticInjectorError(Platform: core)[UserProfileDialog -> InjectionToken MatDialogData]:      NullInjectorError: No provider for InjectionToken MatDialogData!     at NullInjector.push../node_modules/@angular/

I've tried all the related solution here but none of them are working to work.

dashboard.component.ts this is where I have a table that list all users and at the click of the button on a row it should display the complete profile of that user

 viewUserProfile(userId: string){
    const dialogRef = this.dialog.open(UserProfileDialog);

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }

@Component({
  selector: 'user-profile-dialog',
  templateUrl: './user-profile.component.html',
  // styleUrls: ['./dashboard.component.scss']
})
export class UserProfileDialog {

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

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

}

app.module.ts

import { FileSelectDirective } from 'ng2-file-upload';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';

import { AuthGuard } from './_services/guard/auth.guard';
import { appRouteComponents, AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserProfileDialog } from './dashboard/dashboard.component';
import { MaterialDesignModule } from './material';
import {
    DocumentUploaderComponent
} from './register/document-uploader/document-uploader.component';
import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';

/**
 * Application components pages
 */

@NgModule({
  declarations: [
    AppComponent,
    appRouteComponents,
    DocumentUploaderComponent,
    UserProfileDialog,
    FileSelectDirective

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MaterialDesignModule,
    ReactiveFormsModule,
    BsDropdownModule.forRoot(),
    // MatDialogModule

  ],
  entryComponents: [
    UserProfileDialog
  ],
  providers: [AuthGuard,
    {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 2

Views: 2968

Answers (1)

Armando V
Armando V

Reputation: 153

In app.module (or wherever you import your material modules) add MAT_DIALOG_DATA to your imports from @angular/material

import { MAT_DIALOG_DATA } from '@angular/material'


Add it to your app.module providers

@NgModule({
  providers: [ { provide: MAT_DIALOG_DATA, useValue: [] } ]
})

Upvotes: 6

Related Questions