Angular EventEmitter goes from defined to undefined before event handler triggers

Question

I am trying to pass information from a child component back to the parent component. Angular suggests using EventEmitter for this, so I imported Output and EventEmitter and set it up according to the specifications. Here's the code

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

@Component({
  selector: 'app-map',
  standalone: true,
  imports: [],
  templateUrl: '../../assets/map-image.svg',
  styleUrl: './map.component.css'
})


export class MapComponent implements OnInit {
  map: any;
  @Output() selectedCountryEvent = new EventEmitter<string>();
  
  onClick(event: any) {
    console.log("Inside onClick: ");
    console.log(this.selectedCountryEvent);
    this.selectedCountryEvent.emit("hello click");
  }

  ngOnInit(): void {
    this.map = document.getElementsByTagName("svg");
    addEventListener("click", this.onClick);

    console.log("Inside ngOnInit: ");
    this.selectedCountryEvent.emit("hello world")
  }
}

The SVG is a file with a map on it and people click it to interact with it. I want to pass data from the map to the parent component (the app-root). But when I run this code, this is what happens:

The selectedCountryEvent successfully emits to the parent in the ngOnInit function.
When the click event is triggered, the onClick function executes. But when trying to access the selectedCountryEvent (EventEmitter object), the object is undefined and the emit fails.

Here's a picture of the console output generated by this: Output to console for code

It should work the same in both cases, but it doesn't. Does anyone know why the EventEmitter goes from defined during the initialization to undefined before the click event? Is there a way to stop this? All the help I've found just says that I must have set it up wrong, but I can successfully emit to the parent in the initialization. So something else is getting in the way.

(Edit: clarified what happens when the code is run)

Basheer Jarrah · Accepted Answer · 2024-10-09 21:03:18Z

0

By default, when you pass a method as an event listener, the context inside the listener will refer to the DOM element that triggered the event, not to the component or object where the method was originally defined.

You can overcome that behavior by setting the current context to be the context inside the listener as the following:

addEventListener('click', this.onClick.bind(this));

edited Oct 9, 2024 at 21:03

answered Oct 9, 2024 at 20:31

Basheer Jarrah

6874 silver badges17 bronze badges

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

1 Comment

retupmoc258 Over a year ago

Ah! I didn't understand what the "bind" function was for. Now this makes sense. Thank you!

retupmoc258 · Accepted Answer · 2024-10-09 20:10:55Z

0

The problem is that when the onClick event handler is called, the context for "this" is no longer the MapComponent class. This causes the EventEmitter selectedCountryEvent to be undefined.

The problem can be fixed by using an anonymous function as the event handler which can call the locally defined "this" context's event handler.

addEventListener("click", (event: any) => {
  this.onClick(event);
});

edited Oct 9, 2024 at 20:10

answered Oct 9, 2024 at 20:09

retupmoc258

151 silver badge6 bronze badges

Collectives™ on Stack Overflow

Angular EventEmitter goes from defined to undefined before event handler triggers

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related