HTML 5 drag & drop with Angular Typescript

Question

I am testing the HTML5 drag and drop with the Angular application. Just wondering what is wrong here. I have the below code in the app.component.html file.

<div>
  <p draggable="true" ondragstart="drag(event)">Coffee</p>
</div>

And I have this in the Typescript file app.component.ts

export class AppComponent {

 function drag(ev) {
    console.log(ev);
  }
}

It says reference error in the console of the browser. Why is it not outputting anything on the console? Please advise!

Use angular way of events replace ondragstart with (dragstart) — Deepak Kumar T P
– Deepak Kumar T P, Commented Dec 19, 2017 at 5:56
It has all the supported events by html just remove on from event and surround with () example for onclick it is (click) ,onsubmit is (submit) — Deepak Kumar T P
– Deepak Kumar T P, Commented Dec 19, 2017 at 6:00
Any custom event or dom event is captured with a (eventwithouton) . Check angular getting started in the angular.io site — Gary
– Gary, Commented Dec 19, 2017 at 6:03

Abhinandan Gp · Accepted Answer · 2019-12-06 06:26:26Z

2

In angular2/4/5/6/7/8 replace (onevents) with (events) see the example below

ondrop with (drop)

ondragover with (dragover)

ondragstart with (dragstart)

edited Dec 6, 2019 at 6:26

answered Dec 6, 2019 at 6:23

Abhinandan Gp

363 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StefanJM Over a year ago

Took me a day to figure out what's wrong and you saved me, thank you!

Collectives™ on Stack Overflow

HTML 5 drag & drop with Angular Typescript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related