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