dnd-test.component.ts

import { Component, OnInit, ElementRef } from '@angular/core';

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

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

    public source0: HTMLElement;

    constructor(private _elementRef: ElementRef) { }

    // native element reference
    ngOnInit() {
        this.source0 = (<HTMLElement>(<HTMLElement>this._elementRef.nativeElement).children[0]);
        this.source0.addEventListener('dragstart', (event) => {
            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
    }

}

fix:

@Injectable()
export class AppGestureConfig extends HammerGestureConfig { }

@NgModule({
providers: [
{ provide: HAMMER_GESTURE_CONFIG, useClass: AppGestureConfig }
]
})
export class AppModule {