Rendering dynamic components by selector name in Ivy

[tarangkhandelwal]

Rendering Components with component selector name along with lazy module loading. The approach that works with Angular Ivy & AOT compilation.

[abdulfattahKh]

Thanks , It's a very good solution.

But how can we use controlValueAccessor with the dynamic components.

@tarangkhandelwal

[tarangkhandelwal]

Any Angular component can be made dynamic. I haven't done this personally but I don't see a reason why a component implementing controlValueAccessor won't work .

[abdulfattahKh]

I tried to add the following code :

  private async renderComponentInstance() {
    this.destroyComponentInstance();
    const ngControl = this.injector.get(NgControl);
    this.component = await this.componentService.getComponentBySelector(
      this.componentSelector,
      this.moduleLoaderFunction
    );

    ngControl.valueAccessor = this.component.instance;
    this.container.insert(this.component.hostView);
  }

But in the dynamic component I'm getting an error ... writeValue is not a function

[tarangkhandelwal]

Please share a stackblitz demo for the code and use case you are trying to address.

I do not understand why NgControl and valueAccessor related code needs to be here. It should be inside the component ts . RenderComponentInstance should be only doing dynamic rendering not specific things.

[abdulfattahKh]

I'm trying to connect the dynamic-selector-component which has the created dynamic component with a formGroup in the app-component

https://stackblitz.com/edit/angular-ivy-crbv7b

@tarangkhandelwal
@maxkoretskyi

[maxkoretskyi]

First of all you indicate DynamicSelectorComponent as a ValueAccessor but don't implement ValueAccessorInterface, so you get the error:

TypeError: dir.valueAccessor.writeValue is not a function

And then, the next error

Error: No component factory found for Dynamic1Component. Did you add it to @NgModule.entryComponents?

is not related to ValueAccessor or forms in general, but rather to the way you try to access component factory.

My suggestion is that you fist make it work without forms at all, and then once you know it's working, try to integrate it into forms. I also suggest you read this article