Angular inject data into a dynamic components @inputs being passed to a mat-dialog component

Question

I have a situation where I need to display a dynamic table component inside of a dynamic dialog component.

The dynamic dialog can take in another component to be displayed within it. This is accomplished through the MatDialogConfig data property.

This is in the template of my dialog:

<ng-container *ngComponentOutlet="dialogPassedPayload.additionalData"></ng-container>

This ensures the component passed in, is only added the dom if a component is provided. This all works as expected. The issue arises when I need to get data into inputs for that passed component. My dynamic table comp needs to be provided multiple @input properties to function.

I tried to accomplish this through an Injector like so:

let myInjector: Injector;
myInjector = ReflectiveInjector.resolveAndCreate(
  [{
      provide: DATA,
      useValue: [{
        someProp: "data1"
      }, {
        someProp: "data2"
      }]
    },
    {
      provide: MUTATORARRAY,
      useValue: []
    },
    {
      provide: HIDDENPROPS,
      useValue: []
    },
    {
      provide: SHOWSELECTCOLUMN,
      useValue: []
    },
    {
      provide: SHOWEDITCOLUMN,
      useValue: []
    }
  ],
  myInjector
);

const dialogConfig = new MatDialogConfig();
let dialogConfigModel: DialogConfigModel = {
  dynamicFormModel: [],
  additionalData: DataTableComponent,
  dialogTitle: "Change Items(s) Status"
};
dialogConfig.width = this.dialogWidthNormal;
dialogConfig.data = dialogConfigModel;

const dialogRef = this._dialog.open(DynamicDialogComponent, dialogConfig);

I put the injectors in my providers:

providers: [
    { provide: DATA, useValue: "" },
    { provide: MUTATORARRAY, useValue: "" },
    { provide: HIDDENPROPS, useValue: "" },
    { provide: SHOWSELECTCOLUMN, useValue: "" },
    { provide: SHOWEDITCOLUMN, useValue: "" }
]

But... now what do I do? The data does not get injected into the component because I don't believe the injector is linked to my DataTableComponent. I am missing a step with the injector I believe. I followed this here: HERE

EDIT:

I noticed I was not adding the Injector to the outlet:

<ng-container *ngComponentOutlet="dialogPassedPayload.additionalData"></ng-container>

So I passed it into the dialog and changed it to this:

<ng-container *ngComponentOutlet="dialogPassedPayload.additionalData; injector: dialogPassedPayload.injector"></ng-container>

But now I get this error whenever I open the dialog:

ERROR Error: No provider for ComponentFactoryResolver!

score 0 · Answer 1 · answered Jun 20 '19 at 06:20

0

const compFactory = this.compFactRes.resolveComponentFactory(ComponentClassName);
const compRef = compFactory.create(this.injector);
const compInstance: any = compRef.instance;
compInstance.data = data; //you can pass data here
this.appRef.attachView(compRef.hostView);
const compElement = (compRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement; // here you are getting the component html you can append it to anywhere in the angular app

I think this will solve your problem. If you write this inside a service function then you can call it from other places also.

answered Jun 20 '19 at 06:20

NIDHIN VINCENT

225
1
2
9

Thank you for the comment, but that did not resolve the error. Same error message as before – CAlex Jun 20 '19 at 07:23
I am actually getting this error repeated now: ERROR NullInjectorError: StaticInjectorError(AppModule)[BaseTableComponent -> ComponentRef]: StaticInjectorError(Platform: core)[BaseTableComponent -> ComponentRef]: – CAlex Jun 20 '19 at 08:18

Angular inject data into a dynamic components @inputs being passed to a mat-dialog component

1 Answers1