Add and remove component in angular 2

Question

I want to add and remove component dynamically on selecting the checkbox . I'm able to add the component and remove it on clicking close button . But if i try to change the component selection from the checkbox , the previously selected component still remains, it is not getting deleted.

Here is the working demo of it Demo

app.component.ts

  import { Component,ViewChild,ViewContainerRef ,ComponentFactoryResolver , AfterContentInit,OnInit,ComponentRef} from '@angular/core';
import { BoxOneComponent } from './boxOne.component';
import { BoxTwoComponent } from './boxTwo.component';
import { BoxThreeComponent } from './boxThree.component';
import { BoxFourComponent } from './boxFour.component';
import { SharedService } from './shared.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {

  @ViewChild('parent',{read:ViewContainerRef}) parent;
  @ViewChild('widget') widget ;
  public resolve;
  public totalBoxLength:number = 0;

  constructor(private cfr:ComponentFactoryResolver,private sharedService : SharedService){

  }


  passedValue(data){
    data.forEach(element => {
      this.addWidget(element.name,element.length)
    });
  }

  addWidget(val,boxLength){
    this.totalBoxLength += boxLength;
    if(this.totalBoxLength<=8){
        let data;
        switch(val){
          case "BoxOneComponent":
            data = BoxOneComponent;
            break;
          case "BoxTwoComponent":
            data = BoxTwoComponent;
            break;
          case "BoxThreeComponent":
            data = BoxThreeComponent;
            break;
          case "BoxFourComponent":
            data = BoxFourComponent;
            break;
          case "BoxFiveComponent":
            data = BoxFiveComponent;
            break;
          case "BoxSixComponent":
            data = BoxSixComponent;
            break;
          case "BoxSevenComponent":
            data = BoxSevenComponent;
            break;
          case "BoxEightComponent":
            data = BoxEightComponent;
            break;
          case "BoxNineComponent":
            data = BoxNineComponent;
            break;
        }
        this.resolve = this.cfr.resolveComponentFactory(data);
        let cmp: ComponentRef<any> = this.parent.createComponent(this.resolve);
        cmp.instance.boxLength$.subscribe((value)=>this.totalBoxLength -= value)
        cmp.instance.close$.take(1).subscribe(() => cmp.destroy());
    }else{
        this.totalBoxLength -= boxLength;
    }

  }


}

BoxOne.component.ts

    import { Component, Input } from '@angular/core';
import { Subject } from 'rxjs';
import { SharedService } from './shared.service';

@Component({
  selector: 'box-one',
  template: `
    <div>
      <button (click)="close({'name':'BoxOneComponent','length':2})">Close</button>
    </div>
  `,
  styles: [`
    div{
      height:100px;
      width:40%;
      background-color:yellow;
      display:inline-block;
      margin:5px;
    }
    button{
      margin-left:48px;
    }
  `]
})
export class BoxOneComponent  {

  constructor(private sharedServ : SharedService){}

  public close$ = new Subject<void>();
  public boxLength$ = new Subject<number>();

  close(comps){
    this.sharedServ.sendComponentName(comps);
    this.close$.next(null);
    this.boxLength$.next(2);
  }

}

There are another 3 box component like this .

widgetlist.html

<div class="modal fade" bsModal #widgetList="bs-modal" [config]="{backdrop: 'static'}" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm widget-width">
        <div class="modal-content widget-content">
            <div class="modal-header widget-header">
                <div class="modal-title">
                    <span class="widget-heading">List of all available widgets</span>
                    <span (click)="hideWidgetList()" class="close-span">Close</span>
                </div>
            </div>
            <div class="modal-body widget-body">
                <div><input type="checkbox" #BoxOneComponent name="Box One" (click)="selectWidget({'name':'BoxOneComponent','length':2})"> Box One </div>
                <div><input type="checkbox" #BoxTwoComponent name="Box Two" (click)="selectWidget({'name':'BoxTwoComponent','length':1})"> Box Two </div>
                <div><input type="checkbox" #BoxThreeComponent name="Box Three" (click)="selectWidget({'name':'BoxThreeComponent','length':1})"> Box Three </div>
                <div><input type="checkbox" #BoxFourComponent name="Box Four" (click)="selectWidget({'name':'BoxFourComponent','length':2})"> Box Four </div>
            </div>
            <div class="modal-footer widget-footer ">
                <button class="cancel-button" (click)="hideWidgetList()">Cancel</button>
                <button class="update-button " (click)="updateWidgetList();hideWidgetList()">Update</button>
            </div>
        </div>
    </div>
</div>

widgetlist.ts

import { Component,ViewChild ,ElementRef , ViewRef , Output , EventEmitter} from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';
import { SharedService } from './shared.service';

@Component({
  selector: 'app-widget-list',
  templateUrl: './widget-list.component.html',
  styles: [
`
    .close-span{
    cursor: pointer;
    float: right;
    border: 1px solid black;
  }

.widget-body div{
  display:inline-block;
  width:45%;
}

`
  ]
})
export class WidgetList  {

  @ViewChild('widgetList') widgetList : ModalDirective ;
  @ViewChild('BoxOneComponent') boxOne;
  @ViewChild('BoxTwoComponent') boxTwo;
  @ViewChild('BoxThreeComponent') boxThree;
  @ViewChild('BoxFourComponent') boxFour;
  @Output() selected = new EventEmitter();
  constructor( private elemRef : ElementRef,private sharedService:SharedService) { 
    this.sharedService.shareComponentName$.subscribe(val=>{
      this.selectWidget(val);
      this.triggerChecked(val);
    });
  }
  public widgetSelected : Array<string> =[];
  public widgetSelectedName : Array<string> = [];
  public widgetAlreadyInList : Array<any>;

  showWidgetList():void{
    this.widgetList.show();
  }

  hideWidgetList():void{
    this.widgetList.hide();
  }

public pushedArray =[];
  selectWidget(widget){
    let indexOfSelectedWidget = this.widgetSelectedName.indexOf(widget.name);
      if(indexOfSelectedWidget === -1){
          this.widgetSelected.push(widget);
          this.widgetSelectedName.push(widget['name']);
      }else{
          this.widgetSelected.splice(indexOfSelectedWidget,1);
          this.widgetSelectedName.splice(indexOfSelectedWidget,1);
      }      
  }

  updateWidgetList(){
      console.log(this.widgetSelected);
      sessionStorage.setItem("existingWidgets",JSON.stringify(this.widgetSelected))
      this.selected.emit(this.widgetSelected);
  }

  triggerChecked(component){

    switch(component.name){
      case "BoxOneComponent":
        this.boxOne.nativeElement.checked = false;
        break;
      case "BoxTwoComponent":
        this.boxTwo.nativeElement.checked = false;
        break;
      case "BoxThreeComponent":
        this.boxThree.nativeElement.checked = false;
        break;
      case "BoxFourComponent":
        this.boxFour.nativeElement.checked = false;
        break;
    }

  }

}