angular - angular2: Unable to call function while create dynamic component using *ngFor -

i have created dynamic component manually using button click. if click on add button create component next add button. if click on remove button remove component.

plunker

here, problem while creating component using ngfor, unable remove component while clicking on remove button. noticed remove function call not happening while creating component using ngfor.

below code:

parent component:

import{ component, input, output, eventemitter, viewcontainerref,      elementref, componentref, componentresolver,    viewchild, componentfactory } '@angular/core'; import {childcmpt } './child-cmpt'; import {shareddata } './shareddata';       @component({         selector: 'my-app',         templateurl: 'src/parent-cmpt.html',         directives: [childcmpt]     })     export class parentcmpt {          myallnames: any;         @input() thing:string;         //allitems: itemsaddremove;         constructor(private resolver: componentresolver, private appitems: shareddata) {             this.myallnames = this.appitems.getnames();         }          idx:number = 0;          @viewchild('location', { read: viewcontainerref}) location: viewcontainerref;          add() {             this.resolver.resolvecomponent(childcmpt).then((factory:componentfactory<any>) => {                 let ref = this.location.createcomponent(factory)                 ref.instance._ref = ref;                 ref.instance._idx = this.idx++;                 ref.instance._thing = this.thing;                 //allitems.push(ref);                 this.appitems.addmyitem(ref);              });         }          submit(a: any) {             let temp = this.appitems.getmyitem();             let componentthings = temp.map((compref) => compref.instance.thing);             alert(componentthings);         }          removeall = ():void => {             // cleanup stuff..             this.location.clear();             this.appitems.removeall();         }     } 

child component:

import { component, input, output, eventemitter, viewcontainerref, elementref, componentref, componentresolver, viewchild, componentfactory } '@angular/core'; import {shareddata } './shareddata';   @component({     selector: 'child-cmpt',     templateurl: 'src/child-cmpt.html' }) export class childcmpt {     _ref:componentref<any>;     _idx:number;     allval = [];      @input() thing:string;     public components = [];      constructor(private resolver: componentresolver, private location: viewcontainerref, private appitems: shareddata) {      }      remove() {         let temp = this.appitems.getmyitem();         delete temp[temp.indexof(this._ref)];         this._ref.destroy();     }      add() {          this.resolver.resolvecomponent(childcmpt).then((factory:componentfactory<any>) => {             let ref = this.location.createcomponent(factory, 0);             ref.instance._ref = ref;             ref.instance._idx = this._idx++;             ref.instance._thing = this.thing;             //this.allitems.push(ref);             this.appitems.addmyitem(ref);         });     } } 

please me fix issue. appreciate help.

thanks in advance.

store componentref , call destory() when want remove it:

@component({     selector: 'my-app',     templateurl: 'src/parent-cmpt.html',     directives: [childcmpt] }) export class parentcmpt {      myallnames: any;     @input() thing:string;     //allitems: itemsaddremove;     constructor(private resolver: componentresolver, private appitems: shareddata) {         this.myallnames = this.appitems.getnames();     }      idx:number = 0;      @viewchild('location', { read: viewcontainerref}) location: viewcontainerref;      add() {         this.resolver.resolvecomponent(childcmpt).then((factory:componentfactory<any>) => {             this.ref = this.location.createcomponent(factory)             ref.instance._ref = ref;             ref.instance._idx = this.idx++;             ref.instance._thing = this.thing;             //allitems.push(ref);             this.appitems.addmyitem(ref);          });     }      submit(a: any) {         let temp = this.appitems.getmyitem();         let componentthings = temp.map((compref) => compref.instance.thing);         alert(componentthings);     }      removeall():void {         // cleanup stuff..         this.ref.destory();     } }