modal from ng-bootstrap integrate with sortable component from ng2-bootstrap

Question

I have a button that trigger a modal using ng-bootstrap modal

<button (click)="openModal()">Open</button>

the template of modal.html with sortable component inside is:

<template #modalContent let-c="close" let-d="dismiss">
    <bs-sortable #sortableComponent [(ngModel)]="array 
     [itemTemplate]="itemTemplate"></bs-sortable>
</template>

<template #itemTemplate let-item="item" let-index="index">
    <div>{{item | json}} 
        <span class="fa fa-trash" (click)="removeItem(array,index)"></span>
    </div>
</template>

the class will be:

import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
export class sortableModal{
    @Input() public array: [];
    @ViewChild("modalContent") public modalContent: NgbModalModule;
    @ViewChild("sortableComponent") sortableComponent: SortableComponent;

    constructor( public modalService: NgbModal ){
    }

    openModal(){
        this.modalService.open(this.modalContent);
    }

    removeItem(arr,i){
        if(i===undefined) i = -1;
        arr.splice(i,1);
        this.sortableComponent.writeValue(arr); 
        //this.sortableComponent is undefined; why is that?
    }
}

Answer 1

I still don't know why this is happening. But I solved it by wrap ng2-bootstrap sortable component into your own component, MySortableComponent, which has sortable component in. It works.