Memory leak when used on material list elements

[BaHXeLiSiHg]

• I'm submitting a ...
  [ ] bug report

• What is the current behavior?
  Simple material list items with ng2-dnd directive causing memory leak.

<mat-nav-list>
    <mat-list-item matRipple *ngFor="let item of items"
        dnd-draggable [dragData]="{}" [dragEnabled]="true">
    </mat-list-item>
</mat-nav-list>

After destroying view with such usage, everything that was connected with this component will be stuck in memory. To check it you have to take few memory snapshots after destroying view with material list and ng2-dnd directive.

The problem is that the every event listener: ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop , onmousedown still binded to functions from DraggableComponent.

But is still don't understand why :(

• What is the expected behavior?
  I'm using angular @ViewChildren listener to get QueryList of my list items with ng2-dnd directive.

@ViewChildren(MatListItem)
private _matListItems: QueryList<MatListItem>;

And when my component destroys, i'm cutting links to functions in every MatListItem element.

ngOnDestroy() {
    this._matListItems.forEach(item => {
        item._getHostElement().ondragend = undefined;
        item._getHostElement().ondragenter = undefined;
        item._getHostElement().ondragleave = undefined;
        item._getHostElement().ondragover = undefined;
        item._getHostElement().ondragstart = undefined;
        item._getHostElement().ondrop = undefined;
        item._getHostElement().onmousedown = undefined;
    });
}

That will fix memory leak like temporary solution.

• Please tell us about your environment:

• latest Chrome browser version

"@angular/cli": "1.7.4"
"@angular/EVERYTHING ELSE": "5.2.10"
"@angular/material": "5.2.5"
"core-js": "2.5.6"
"hammerjs": "git+http://github.com/hammerjs/hammer.js.git"
"ng2-dnd": "5.0.2"
"rxjs": "5.5.6"
"webpack": "3.10.0"
"zone.js": "0.8.26"
"web-animations-js": "2.3.1"
"typescript": "2.6.2"