How do you call this method ( Angular 5 )?

Question

So, i am pretty new to Angular 5 and in my application i have a component that looks something like this:

//imports

@Component({
  selector: 'dragdropmagic',
  templateUrl: './dragdropmagic.component.html',
  styleUrls: ['./dragdropmagic.component.css']
})
export class DragDropMagicComponent {

  constructor(/*inject services etc*/) {}

  ngOnInit() {
    //init stuff..
  }

  document.getElementById("dragdrop").addEventListener("drop", function (e) {
    e.preventDefault();

    dragDropMagic(e); /*<--- Throws error "Cannot find name 'dragDropMagic'" */
    this.dragDropMagic(e); /*<--- Throws error "Not valid Property for HTML Element" */
  })

  dragDropMagic(e){
    console.log("Do something...");
  }
}

What i am trying to do is call the dragDropMagic function inside the EventListener. How can i achieve this? Normally i would call a method with this.dragDropMagic(e) unfortunately it doesnt seem to work.

Your code must be in a method. And stop using function(). Use arrow functions. — JB Nizet, Jan 30 '18 at 14:18
Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — JB Nizet, Jan 30 '18 at 14:19
Please format your code. https://stackoverflow.com/help/how-to-ask — Sonu Kapoor, Jan 30 '18 at 14:23
@JBNizet thanks it really needs to be in a method. Why should i use arrow functions? Would it look like this dragDropMagic = (e) => {...}? How would i call it? — TheWandererr, Jan 30 '18 at 16:17
Because that's what allows binding the function to this. Have you clicked on the link to the duplicate? — JB Nizet, Jan 30 '18 at 16:18

score 1 · Answer 1 · answered Jan 30 '18 at 14:39

You need to use @HostListener to handle this.

@HostListener('window:drop', ['$event'])
public dragDrop(event) {
  event.preventDefault();

  // Do your magic;
}

And to find out more on this from someone who has really got a great answer see this SO post as it's very informative and something you can work from to develop your code.

ConnorsFan · Accepted Answer · 2018-01-30T15:06:17.657

1

Instead of calling addEventListener, you can bind the dragDropMagic method to the drop event of your drop zone in the component template, as shown in this stackblitz:

<div (dragover)="$event.preventDefault()" (drop)="dragDropMagic($event)">Drop area</div>

dragDropMagic(event: DragEvent) {
  event.preventDefault();
  console.log("Do something...");
}

edited Jan 30 '18 at 15:06

answered Jan 30 '18 at 14:58

ConnorsFan

70,558
13
122
146

How do you call this method ( Angular 5 )?

2 Answers2