[Angular 2] Set Properties on Dynamically Created Angular 2 Components

When you generate Angular 2 components, you’re still able to access the component instance to set properties and invoke methods from the component class.

 

import {Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, Input} from '@angular/core';
import {SimpleService} from "../../serivces/simple.service";
import {WidgetThree} from "../widgets/widget-three.component";

@Component({
    moduleId: module.id,
    selector: 'home',
    templateUrl: 'home.component.html'
})
export class HomeComponent {

    @ViewChild('container', {
        read: ViewContainerRef
    }) container;

    constructor(private resolver: ComponentFactoryResolver, private simpleService: SimpleService) {
    }

    ngAfterContentInit(){
        const WidgetFactory = this.resolver.resolveComponentFactory(WidgetThree);
        this.container.createComponent(WidgetFactory);
        this.container.createComponent(WidgetFactory);
        this.container.createComponent(WidgetFactory);
        this.container.createComponent(WidgetFactory);
        const comRef = this.container.createComponent(WidgetFactory); // return a componentRef
        comRef.instance.message = "I am last"; // using componentRef's instance prop to access the component prop
        comRef.instance.renderer.setElementStyle(
            comRef.instance.input.nativeElement,
            'color',
            'red'
        )
    }

}

 

widget-three.ts:

import {Component, OnInit, ViewChild, Renderer, ElementRef, Input} from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'widget-three',
    template: `<input type="text" #inputRef [value]="message"/>`
})
export class WidgetThree {

    @ViewChild('inputRef') input;
    @Input() message = "Default Value";

    constructor(private renderer: Renderer) {
    }

    ngAfterViewInit(){
        this.renderer.invokeElementMethod(
            this.input.nativeElement,
            'focus',
            []
        );
    }
}

 

So each time, when we call 'createComponent' method, it returns a ComponentRef instance. See https://angular.io/docs/ts/latest/api/core/index/ViewContainerRef-class.html

 

We can use the instance to access the generated component's props, such as 'Renderer' or Input (message). Here we change the message value.

 comRef.instance.message = "I am last";

And change the style thought Renderer:

        comRef.instance.renderer.setElementStyle(
            comRef.instance.input.nativeElement,
            'color',
            'red'
        )