EventEmitter.emit() is not a function

Question

I have a child component where I use a dropdown from primeng plug in to send its value to the parent whenever the user changes the selection. I use the EventEmitter.emit() function to emit a value of type Solution. The Solution is an interface defined by me.
Here is how I defined the emitter:

@Output('solutionChange') selectedSolution: EventEmitter<Solution> = new EventEmitter<Solution>();

Here is how I called the emitter:

public onSolutionChange(args) {
    let solution: Solution = args.value as Solution;
    this.selectedSolution.emit(solution);
  }

The problem is when I call the emit() function it gives the error TypeError: emit is not a function.

I already tried to change the definition of the emitter to @Output('solutionChange') selectedSolution: EventEmitter<any> = new EventEmitter<any>(); because the args.value is an any type coming from backend, but still the same error. I also tried replacing the emit() function with the next() function.

Answer 1

I managed to solve it. I tried to solve it for about an hour and when I thought I got no other options I decided to ask for help. It was my mistake because I wasn't careful at the parameter I gave in NgModel, on the HTML, and I also used the wrong parameter in the service that gets the data from backend. I also checked the types many times before I asked the question. The reason why I keep this question is to help other guys that might do the same mistake like I did. Thanks for your help!

Answer 2

Likely you are importing the wrong EventEmitter, which can happen automatically in IDE such as VS Code. It tries to import Node.js events EventEmitter make sure you import from @angular/core EventEmitter like:

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

Hopefully that helps!