Как я могу добавить перетаскиваемый виджет с Мурри динамически

Question

Я использовал Мурри для реализации перетаскиваемого виджета.Моя цель состоит в том, чтобы добавить виджет динамически с нажатием кнопки

с директивой injectiv Я реализовал добавление виджета динамически.но проблема в том, что все новые созданные виджеты перекрываются друг с другом и не перетаскиваются.

код такой же

<div class="board">
  <div class="board-column todo">
    <div class="board-column-header">To do</div>
    <div class="board-column-content">
      <div class="board-item">
        <div class="board-item-content">
          <span>Item #</span>
          1
        </div>
      </div>
    </div>
  </div>
  <ng-template appInject></ng-template>


</div>
<button class="button" (click)="addComp()">Add component</button>
<button class="button" (click)="removeComp()">Remove component</button>

Home.ts

import { DoingComponent } from './../doing/doing.component';
import { InjectDirective } from './../injectiv.directive';
import { Service } from './../service/service.service';
import * as Muuri from 'muuri';
import { Component, OnInit, ViewChild, ComponentFactoryResolver } from '@angular/core';

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {

  public itemContainers: Array<any>;
  public columnGrids: Array<any>;
  public boardGrid: any;

  @ViewChild(InjectDirective) injectComp: InjectDirective;

  constructor(private _componentFactoryResolver: ComponentFactoryResolver) {
  }

  public addComp() {
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(DoingComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    const componentRef = viewContainerRef.createComponent(componentFactory);
      this.createWidget();
  }

  public removeComp() {
    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(DoingComponent);
    const viewContainerRef = this.injectComp.viewContainerRef;
    const componentRef = viewContainerRef.remove();
  }


  ngOnInit() {
    this.createWidget();
  }

  createWidget() {
    this.itemContainers = new Array<any>().slice.call(document.querySelectorAll('.board-column-content'));
    this.columnGrids = new Array<any>();

    // Define the column grids so we can drag those
    // items around.
    this.itemContainers.forEach((container) => {

      // Instantiate column grid.
      // NOTE: if you get a constructor Typescript error, you may need to use Muuri.default
      const grid = new Muuri(container, {
        items: '.board-item',
        layoutDuration: 400,
        layoutEasing: 'ease',
        dragEnabled: true,
        dragSort: () => {
          return this.columnGrids;
        },
        dragSortInterval: 0,
        dragContainer: document.body,
        dragReleaseDuration: 400,
        dragReleaseEasing: 'ease'
      })
        .on('dragStart', (item) => {
          // Let's set fixed widht/height to the dragged item
          // so that it does not stretch unwillingly when
          // it's appended to the document body for the
          // duration of the drag.
          item.getElement().style.width = item.getWidth() + 'px';
          item.getElement().style.height = item.getHeight() + 'px';
        })
        .on('dragReleaseEnd', function (item) {
          // Let's remove the fixed width/height from the
          // dragged item now that it is back in a grid
          // column and can freely adjust to it's
          // surroundings.
          item.getElement().style.width = '';
          item.getElement().style.height = '';
          // Just in case, let's refresh the dimensions of all items
          // in case dragging the item caused some other items to
          // be different size.
          this.columnGrids.forEach((_grid) => {
            _grid.refreshItems();
          });
        })
        .on('layoutStart', () => {
          // Let's keep the board grid up to date with the
          // dimensions changes of column grids.
          this.boardGrid.refreshItems().layout();
        });

      // Add the column grid reference to the column grids
      // array, so we can access it later on.
      this.columnGrids.push(grid);

    });

    // Instantiate the board grid so we can drag those
    // columns around.
    this.boardGrid = new Muuri('.board', {
      layoutDuration: 400,
      layoutEasing: 'ease',
      dragEnabled: true,
      dragSortInterval: 0,
      dragStartPredicate: {
        handle: '.board-column-header'
      },
      dragReleaseDuration: 400,
      dragReleaseEasing: 'ease'
    });
  }

}

child.html

<div class="board-column working">
  <div class="board-column-header">To do</div>
  <div class="board-column-content">
    <div class="board-item">
      <div class="board-item-content">
        <span>Item #</span>
        6
      </div>
    </div>
  </div>
</div>

injectiv.directive.ts

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appInject]'
})
export class InjectDirective {

  constructor(public viewContainerRef: ViewContainerRef) { }

}

Я много чего пробовал, но безуспешно.

У кого-нибудь есть идеи?

Спасибо за помощь