Angular 2: Load component dynamically with parameters @Input and @Output

Question

Currently I'm loading some of my components dynamically with this piece of code.

export class ComponentOutlet {

    constructor(
        private vcRef: ViewContainerRef,
        private compiler: Compiler,
        private dataService: DataService
    ) { }

    private _createDynamicComponent() {

        // Some logic to decide which component should be loaded
        return MyComponent;
    }


    ngOnChanges() {

        this.compiler.compileComponentAsync(this._createDynamicComponent())
            .then(factory => {
                const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
                this.vcRef.clear();
                this.vcRef.createComponent(factory, 0, injector);
            });
    }

The problem is that MyComponent has some @Input and Output bindings. Is it possible to set this bindings here? How can I achieve that?

With RC6+ there is now .compileComponentAsync .. check one option here stackoverflow.com/q/38888008/1679310 (also with bindings input) — Radim Köhler
– Radim Köhler, Commented Sep 2, 2016 at 9:20
@RadimKöhler compileComponentAsync was removed in RC6. With RC6+ there is now compileModuleAndAllComponentsAsync — yurzui
– yurzui, Commented Sep 2, 2016 at 9:25

Günter Zöchbauer · Accepted Answer · 2016-09-02 09:18:18Z

14

Bindings to inputs and outputs can only be used to components that are statically added to another components template.

In your case you can do it imperatively like

 var cmpRef = this.vcRef.createComponent(factory, 0, injector);
 cmpRef.instance.someInput = value;
 cmpRef.instance.someOutput.subscribe(data => this.data = data);

answered Sep 2, 2016 at 9:18

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rose Nettoyeur Over a year ago

Does ngOnChanges() of the instance gets triggered by Angular when adding the input? For me it doesn't. I have to call cmpRef.instance.ngOnChanges() manually.

Günter Zöchbauer Over a year ago

No, ngOnChanges() is called when someProp changes with [someInput]="someProp". Without such a binding ngOnChanges won't be called. You can make someInput a setter and put the code there.

omeralper Over a year ago

@GünterZöchbauer In this case we know inputs of the dynamically created component and give inputs as component needs. So what if we create different dynamic components according as a parameter and each dynamic component needs different inputs? There should be a systematic way to pass input parameters from parent to child.

Günter Zöchbauer Over a year ago

There is currently none. You need to come up with your own.

Collectives™ on Stack Overflow

Angular 2: Load component dynamically with parameters @Input and @Output

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related