[Angular 2] Move and Delete Angular 2 Components After Creation

After the original order is set, you can still leverage methods on the Angular 2 ViewContainer to reorder the components. This is especially helpful when you want an event to trigger layout changes from your generated components.

 

import {
    Component, ViewChild, ViewContainerRef, ComponentFactoryResolver
} 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 {

    last;
    @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);
        this.last = this.container.createComponent(WidgetFactory); // return a componentRef
        this.last.instance.message = "I am last"; // using componentRef's instance prop to access the component prop
        this.last.instance.renderer.setElementStyle(
            this.last.instance.input.nativeElement,
            'color',
            'red'
        );
    }

    onClick(){
        const WidgetFactory = this.resolver.resolveComponentFactory(WidgetThree);
        const comRef = this.container.createComponent(WidgetFactory, 2);
        comRef.instance.message = "I am third";
    }

    moveup(){
        const randomInx = Math.floor(Math.random() * this.container.length);
        this.container.move(this.last.hostView, randomInx);
    }

}

 

In the code, will just move the last WidgetTree component to some random position.

 

How to get the host elemnt?:

this.last.hostVie

How to get the children number inside the host veiw?

this.container.length