Reputation: 1723
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
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