how to fire custom event in angular

Question

I have created custom event for mousestop , but i am not able to fire the component methods from the custom event. below is the html code

<div class="col-md-12 img-div" #imageCanvas>
            <img id="srcImg" #srcImg class="crf-img" (click)="createOverlay($event)"
                src="../../assets/aCRF-PRV111_CLN-001 v1.4-images/aCRF-PRV111_CLN-001 v1.blank_0.jpg">
</div>

below is the component.ts code.

ngOnInit() {
    (function (mouseStopDelay) {
      var timeout;
      document.getElementById('srcImg').addEventListener('mousemove', function (e) {
        clearTimeout(timeout);
        timeout = setTimeout(function () {
          var event = new CustomEvent("mousestop", {
            detail: {
              clientX: e.clientX,
              clientY: e.clientY
            },
            bubbles: true,
            cancelable: true
          });
          e.target.dispatchEvent(event);
        }, mouseStopDelay);
      });
    }(2000));

    document.getElementById('srcImg').addEventListener('mousestop', function (e) {
      // console.log('You stopped your mouse while on the link');
      console.log('Mouse stopped and coordinates are: ', (e as any).detail.clientX, (e as any).detail.clientY);
      
        this.onMouseMove((e as any).detail.clientX, (e as any).detail.clientY);
    });
  }
  onMouseMove(x: number, y: number) {
    ----some code here--- 
  }

but i am getting below error

ERROR TypeError: this.onMouseMove is not a function
    at HTMLImageElement.<anonymous> (eimage.component.ts:75)

Kindly let me know how to resolve it. I have implemented same in ngAfterViewInit also but i am facing same error.

kai · Accepted Answer · 2020-10-27 08:28:38Z

3

The problem is that you are using a function instead of an arrow function () => {}. For that reason your this changes. Change

document.getElementById('srcImg').addEventListener('mousestop', function (e) {

to

document.getElementById('srcImg').addEventListener('mousestop', (e) => {

Here you can find additional info on that topic.

edited Oct 27, 2020 at 8:28

answered Sep 2, 2020 at 9:29

kai

6,92725 silver badges39 bronze badges

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

1 Comment

Jeremy Thille Over a year ago

I agree. Using the fat arrow function transfers the context (this) inside the function.

Collectives™ on Stack Overflow

how to fire custom event in angular

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related