DynamicComponentLoader does not support inputs or outputs

[VinnyVicious]

If a child component requires an input (like the HeroDetailsComponent has, which is the selectedHero), it can't be loaded dynamically. There's no way to instantiate a child component with inputs this way.

[zoechi]

dup of #6223 ?

[VinnyVicious]

Outputs are not supported as well, just tried it.

[VinnyVicious]

It's not related. Issues #6223 and #3474 are related to data-binding. This one is related to inputs and outputs not being read from the DCL.

[xtiancapil]

Not sure about the output, but I was able to set my inputs using the promise:

this.dynamicComponentLoader.loadIntoLocation(sampleComponent, eleRef, anchor).then(componentRef=> {
    componentRef.instance.inputProperty = "data goes here";
  });

this is assuming your component declares inputs this way:

export class SampleComponent {
  @Input() inputProperty: any;
}

[byavv]

I came to the same result as @xtiancapil. My code:

this.dcl.loadIntoLocation(ComponentToLoad, this.elementRef, 'host')
                    .then((component) => {
                        component.instance.inputValue = "whatever";                       
                        component.instance.outputValue.subscribe((value) => {
                            // do smth
                        });
                    });

And I marked this code as temporal. Before I find better ideas. Hope so)

[antoineol]

There is a difference with the @input behavior: the dynamic component's template will be rendered once before properties are set, which leads to error in template rendering if we have a dot notation there. We don't make use of the @input() annotation, we just set the public properties later.

I am using the previous notation as well, but looking forward to pass real inputs :)

[zoechi]

Not sure what your problem is.

will be rendered once before properties are set, which leads to error in template rendering if we have a dot notation there.

this is also the case for other components where values are fetched from the server for example. Just use ?. in the binding instead of just . and you won't get an error if the value is only set at a later time.

[antoineol]

@zoechi Oh I didn't know this trick! Thanks a lot, it helps to avoid this issues. You are right, we may have the same issue with remote data. However, I would have expected it to be the default behavior with . (instead of ?.) as it is in Angular 1. Maybe there are some good reasons behind that I don't know :)

It pointed a difference with @input behavior when using DynamicComponentLoader, not so critical with this syntax.

[mjamin]

Just use ?. in the binding instead of just . and you won't get an error if the value is only set at a later time.

That doesn't work with ngControl, e.g. [ngControl]="inputValue?.name". Any idea how I can set the values before the component is rendered the first time?

[pa-ru]

Are there plans to fix this issue?

[tdterry]

I just ran across this while trying to do something similar to the OP. I have a list of blocks that I need to render into the view using a component based on the block.type, so I'm using the DynamicComponentLoader. For the blocks to work, I need to bind an @input to the block data.

[zoechi]

@tdterry GitHub issues are for bug reports. For support questions please use one of the channels mentioned in https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

[gmaggiodev]

The workaround of using the promise is not good for me. One of the @input in my case are "data" that comes from a service and that are not available when I create the component. The data will arrive later but seems that the new component is not aware about that change.

For me is strategic that the @input and @output are supported by DynamicComponentLoader.

Please fix it!

[pkozlowski-opensource]

Let's track this one as part of #8164 where we are going to have proper API / solution for interacting with inputs / outputs of dynamically loading components. Closing as a duplicate.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}