CODEWITHSUNDEEP
angulartypescriptdependency-injectionmodal-dialogangular-material
Guy E
Guy E

Reputation: 1927

NullInjectorError: StaticInjectorError(AppModule)[Component-> MatDialogRef]

I'm using a component as a regular component reaching by routing, but I want it also to use it as the "target" of modal dialog, when using injection into the component:

export class Component1 implements OnInit {
constructor(private service: <someService>,
public dialogRef: MatDialogRef<Component1>, //These 2 lines are used as 
                                            //injection from the opener
@Inject(MAT_DIALOG_DATA) public data: any) {}

This is the code of the "opener":

openComponent1aSModalPage()
{
  Const dialogRef = this.dialog.open(Component1, {
  width: '70%',
  height: '70%',
  data: {property: propertyValue}
 });

I works when I activate the opener, but if I try to reach the same component using a regular routing, I'm getting:

Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[Component1 -> MatDialogRef]: StaticInjectorError(Platform: core)[Component1-> MatDialogRef]: NullInjectorError: No provider for MatDialogRef!

How can I adjust that component to work in both modes ?

Upvotes: 5

Views: 4311

Answers (1)

Guy E
Guy E

Reputation: 1927

I found a solution for the optional injected parameters in the component: I've added @Optional() decorator before the constructor parameter (that should only be injected if there was a provider registered).

constructor(private service: <someService>,
@Optional() public dialogRef: MatDialogRef<Component1>,
@Optional() @Inject(MAT_DIALOG_DATA) public data: any )

I found the solution here: DI constructor with optional parameters

Upvotes: 7

Related Questions