Angular 6 (drag) Event Bind not Working - html

Question

I am building a schedule view, which is currently in a preliminary stage, where I add events and then I can rearrange them, either by dragging the event vertically upwards or downwards, or by resizing it vertically. For resizing, I'll click a button contained within the event and drag it up or down to resize the event. For a better view, please have a look at this opensource calendar.
I am currently facing an issue, in making my elements draggable. None of the drag events fire, although other (click, mouseover) do work. The following are snippets from what I've done till now. Please excuse me for my work, I'm still a little rusty at Angular.
*.component.html:
<table>
<tbody *ngFor="let item of FullHours; let i = index" >
<tr [ngSwitch]="returnItem(Doc)" [ngStyle]="{'background-color':returnItem(Doc) === ',' ? 'white' : 'yellow' }">
<td [style.height.px]="unitHeight" >
<div ondrop="drop($event)" ondragover="allowDrop($event)" *ngIf="hasEvent(i)" class="event-container" style="background-color: white;">
<div class="event" draggable="true" ondragstart="drag($event)">
<div style="width:100%; float:left" class="content">04:30PM -- 05:30PM</div>
<div style="width:100%; float:left" class="content">event {{i}}</div>
<button draggable="true" (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)" class="eventbtn" style="position: absolute; left:0; right:0; bottom:0" >
=
</button>
</div>
</div>
<div *ngIf="!hasEvent(i)" (click)="createEvent(i)" class="event-container"></div>
</td>
</tr>
</tbody>
</table>
*.component.ts:
onDrop(event: any) {
alert('on-drop');
event.preventDefault();
event.stopPropagation();
// your code goes here after droping files or any
//try to change height
}
onDragOver(evt) {
alert('on-drag-over');
evt.preventDefault();
evt.stopPropagation();
}
onDragLeave(evt) {
alert('on-drag-leave');
evt.preventDefault();
evt.stopPropagation();
}
I've put in alerts on all binded functions, but none of them work. I did try this earlier with the whole event too but it still didn't work. I've created simple drag and drop divs wit JavaScript code but even those don't work in here. Do let me know if I need to provide anything else.
I'd be grateful for any guidance that can make my drag and drops work. Thanks in advance.