ng2-dragula modelDrop event causing array to be undefined

Question

Can't seem to work out why this isn't working.

So as you can see in this GIF I am dragging a div from one container to another, ondrop` the object disappears and the array becomes undefined.

Here is the code I have:

Main View.html

<div *ngIf="tvRequests">
    <div class="col-md-4">
        <div class="landing-box">
            <md-card-title>Title</md-card-title>
            <div [dragula]='"requests-bag"' [dragulaModel]="tvRequests.new">
                <br />
                <br />
                <request-card *ngFor="let item of tvRequests.new" [request]="item"></request-card>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="landing-box">

            <div [dragula]='"requests-bag"' [dragulaModel]="tvRequests.approved">
                <br />
                <br />
                <request-card *ngFor="let item of tvRequests.approved" [request]="item"></request-card>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="landing-box">
            <md-card-title>Title</md-card-title>
            <div style="border: dashed">
                <div [dragula]='"requests-bag"' [dragulaModel]="tvRequests.available">
                    <br />
                    <br />
                    <request-card *ngFor="let item of tvRequests.available" [request]="item"></request-card>
                </div>
            </div>
        </div>
    </div>
</div>

Main View.ts

import { Component, OnInit } from '@angular/core';
import { DragulaService } from 'ng2-dragula/ng2-dragula';
import { RequestService } from '../services/request.service';
import { ITvRequestModel, IMovieRequestModel, IRequestGrid } from '../interfaces/IRequestModel';

@Component({
    moduleId: module.id,
    templateUrl: './request-grid.component.html'
})
export class RequestGridComponent implements OnInit {

    constructor(private dragulaService: DragulaService, private requestService: RequestService) {
        this.dragulaService.dropModel.subscribe((value: any) => {
            console.log(value);
            console.log(this.tvRequests.new);
            console.log(this.tvRequests.approved);
            console.log(this.tvRequests.available);
        });
    }

    ngOnInit(): void {
        this.requestService.getMovieGrid().subscribe(x => {
            this.movieRequests = x;
        });
        this.requestService.getTvGrid().subscribe(x => {
            this.tvRequests = x;
        });
    }


    movieRequests: IRequestGrid<IMovieRequestModel>;
    tvRequests: IRequestGrid<ITvRequestModel>;

}

RequestsGrid<>.ts

export interface IRequestGrid<T> {
    available: T[],
    new: T[],
    approved:T[]
}

The request-card component is just some styling and doesn't contain any code.

When I drop as you can see in the Main View.ts I am subscribing to the dropModel event and logging out to see what is going on. Here console output for the dragging GIF above:

Any idea why the item is disappearing?

Update Plunker: http://plnkr.co/edit/U5AjZ0Gqnxq8bAznYueG?p=preview

Answer 1

Looks like it was the <br/> tags that was causing the issue!

https://github.com/valor-software/ng2-dragula/issues/742#issuecomment-308930617