CODEWITHSUNDEEP
angular
JME
JME

Reputation: 2353

Angular 7: No service provided for modal

I have a service that I am providing in the a component using polymorphism. A child component is attempting to open a modal that requires the morphed service via DI, but says there is no provider.

@Component({
  selector: 'app-user-details',
  templateUrl: './user-details.component.html',
  styleUrls: ['./user-details.component.scss'],
  providers: [
    { provide: GenericRolesService, useExisting: UserRolesService }
  ]
})
export class UserDetailsComponent implements OnInit, OnDestroy {

The modal component constructor

constructor(
  private genericRolesService: GenericRolesService,
  private dialogRef: MatDialogRef<RoleSelectorComponent>,
  @Inject(MAT_DIALOG_DATA) data: RoleSelectorModalInput
) {

I suspect that the modal is separated from the DI tree. What is the appropriate way to get the polymorphed service to the modal?

Upvotes: 1

Views: 199

Answers (1)

kvetis
kvetis

Reputation: 7331

Material Dialog has a config attribute that accepts current ViewContainerRef. It then uses its injector to resolve dependencies of the component's constructor.

export class UserDetailsComponent {

 constructor(
   public dialog: MatDialog,
   private viewContainerRef: ViewContainerRef,
 ) {}

 openModal() {
    this.dialog.open(YourDialogComponent, {
      viewContainerRef: this.viewContainerRef
    });
 }
}

I created Stackblitz demonstration for you.

Upvotes: 1

Related Questions