La vue

http://plnkr.co/edit/t9oLGLnD7iwHBzIXYvnQ?p=preview

Declarer un tag html qui va accueillir le composant

1
<div #dynamicTarget></div>

Le Composant

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
export class ItemComponent implements OnChanges, OnDestroy {

   @ViewChild('dynamicTarget', {read: ViewContainerRef})
    private dynamicTarget: any;
    private componentReference: ComponentRef<any>;

    constructor(  private resolver: ComponentFactoryResolver) {

    };

    ngOnChanges(changes: SimpleChanges): void {
                let componentFactory = this.resolver.resolveComponentFactory(TestComponent);
                this.componentReference = this.dynamicTarget.createComponent(componentFactory);
                this.componentReference.instance.log();

        }
    }
    ngOnDestroy() {


        // If we have a component, make sure we destroy it when we lose our owner
        if (this.componentReference) {
            this.componentReference.destroy();
        }
    }