Как удалить динамически созданный элемент Content Projection Transclusion в angular2?

Question

Я создал два компонента виджета, например, виджет "Данные" и "Диаграмма", которые включаются другим компонентом с именем "Компонент карты". В компоненте "Карточка" я использовал общую кнопку закрытия, чтобы я мог использовать кнопку закрытия в каждом виджете по умолчанию. Виджет "Данные и диаграммы" создается динамически и сохраняется в массиве, и, наконец, компоненты отображаются в HTML-шаблон. Теперь я хотел бы удалить компоненты из массива, нажав кнопку закрытия на каждом виджете. Я пытался следующим образом,

CardComponent.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
import {WidgetComponent} from './widget.component';

@Component({      
    selector: 'card',
    templateUrl: 'card.component.html',
})
export class CardComponent {

    @Input()
    public header: string = 'this is header';

    @Input()
    public footer: string = 'this is footer';

    @Output() closeWidget = new EventEmitter();

    close(){
      console.log('Card close');
      this.closeWidget.emit();
    }        
}

CardComponent.html

<div class="card" style="border: 1px solid #d0d0d0;">
  <div class="card-header">        
    {{ header }}      
  <a (click)="close()" class="btn btn-primary">Close</a>
  </div>
  <ng-content></ng-content>
  <div class="card-footer">
    {{ footer }}       
  </div>
</div>

диаграмма-widget.component.ts

@Component({
selector: 'chart-widget',
templateUrl: './app/chart-widget.component.html',
providers: [{provide: WidgetComponent, useExisting: forwardRef(() => ChartWidget) }]
})

export class ChartWidget extends WidgetComponent implements OnInit {

}

график-widget.component.html

<card header="Chart Panel" footer="Footer here" class="ui-toolbar-group-
right">             
    <div class="card-block">
    <h4 class="card-title">Chart Card</h4>
    <p class="card-text">Chart showing here</p>

  </div>
</card>

AppComponent.ts

@Component({
  selector: 'app-root',
  templateUrl: './app/app.component.html',
  styleUrls: ['./app/app.component.css'],
  entryComponents: [ChartWidget,  DataWidget], 
})

export class AppComponent {
   private elements: Array<{ view: ViewRef, component: WidgetComponent}>=[];
   private WidgetClasses = {
      'ChartWidget': ChartWidget,
      'DataWidget': DataWidget        
  }
  @ViewChild(DynamicComponent) dynamicComponent:DynamicComponent;  


  addComponent(widget: string ): void{
    let component = this.dynamicComponent.addComponent(this.WidgetClasses[widget]);
    let view: ViewRef = this.dynamicComponent.container.detach(0);
    this.elements.push({view,component});

    this.dynamicComponent.resetContainer();
  }

  onWidgetDelete(element: any){
        console.log('Call Delete called');
        var index = this.elements.findIndex((elt) => (elt===element));
        if (index !== -1) {
            this.elements.splice(index, 1);
        }


    }
}

app.component.html

<button (click)="addComponent('ChartWidget')">Add ChartWidget</button>
<button (click)="addComponent('DataWidget')">Add DataWidget</button>

<dynamic-component [hidden]="true" ></dynamic-component>  

<hr>
Dynamic Components
<hr>
<widget *ngFor="let item of elements" (closeWidget)="onWidgetDelete(item)">
  <ng-container *view="item.view" ></ng-container>
</widget>

Я получаю сообщение о событии click на консоли, но EventEmitter не работает. Как удалить компоненты, нажав кнопку закрытия? Вот мой плункер https://plnkr.co/edit/tFmcpre6FHysJ1uUFPp5?p=preview