Is ElementRef required to get dragstart DragEvent in Angular 2?
<p>In this gist <a href="https://gist.github.com/gatimus/5abe1fb2ef45f26657ed6843902b872b" rel="nofollow">https://gist.github.com/gatimus/5abe1fb2ef45f26657ed6843902b872b</a> I am listening for dragstart event on 2 elements. One with angular 2 syntax and one with native element reference. Only adding the event listener with the native element reference was I able to get a DragEvent with dataTransfer property. <code>ElementRef</code> is considered a security risk and seemingly you should be able to accomplish the same with the Angular 2 event binding syntax. Is <code>ElementRef</code> required to get dragstart DragEvent in Angular 2 and is this a Angular 2 bug?</p>

<pre><code>import { Component, OnInit, ElementRef } from '@angular/core';

@Component({
    template: `
        &lt;!-- native element reference --&gt;
        &lt;div id="source0"
             style="background-color: red; height: 20px;"
             draggable="true"&gt;
        &lt;/div&gt;

        &lt;!-- angular 2 template syntax --&gt;
        &lt;div id="source1"
             style="background-color: green; height: 20px;"
             draggable="true"
             (dragstart)="dragStart($event)"&gt;
        &lt;/div&gt;
    `
})
export class DragAndDropComponent implements OnInit {

    public source0: HTMLElement;

    constructor(private _elementRef: ElementRef) { }

    // native element reference
    ngOnInit() {
        this.source0 = (&lt;HTMLElement&gt;(&lt;HTMLElement&gt;this._elementRef.nativeElement).children[0]);
        this.source0.addEventListener('dragstart', (event) =&gt; {
            console.log('source0', event); // DragEvent with dataTransfer property 
            event.dataTransfer.effectAllowed = 'move'; // No error
            event.dataTransfer.setData('text/plain', 'test'); // No error
        });
    }

    // angular 2 template syntax
    dragStart(event: DragEvent) {
        console.log('source1', event); // Object with MouseEvent for srcEvent
        event.dataTransfer.effectAllowed = 'move'; // Cannot set property 'effectAllowed' of undefined
        event.dataTransfer.setData('text/plain', 'test'); //Cannot read property 'setData' of undefined
    }

}
</code></pre>

<p>Edit: 
It turns out this is only duplicatable when <code>MaterialModule</code> is imported and the required HammerJS is loaded. Is there a way to have HammerJS not override the event handling through angular 2? I am only including HammerJS to load material 2 without error.</p>