TypeError: instance[output.propName].subscribe is not a function

Question

I'm trying to emit a event from child to parent component.

Parent:

parent.ts

onChangeUpload(event){
  console.log('event');
  console.log(event);
}

<app-upload (uploadEmit)="onChangeUpload($event)"></app-upload>

Child:

@Output() uploadEmit: EventEmitter = new EventEmitter();

this.uploadEmit.emit('upload successful');

And i got this error:

core.js:1448 ERROR Error: Uncaught (in promise): TypeError: instance[output.propName].subscribe is not a function

@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack: 3.11.0

Tanning

Answer 1

import { EventEmitter } from 'events';

Is this your import statement?

If it is, change it to

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

And disable VS Code auto-import. :)

Disputatious

Answer 2

I think you have not mentioned the Type, when we send data on event emit, we have to explicitly specify the type of data that we will be sending like:

Child Component:

<h3> Child Component </h3>
<button (click)="onSendData()">Send Data</button>

Child Typescript:

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

@Component({
  selector: 'hello',
  templateUrl: './hello.component.html',
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;
  @Output() passData = new EventEmitter<string>();

  onSendData(){
    this.passData.emit("Hello From Child");
  }
}

You can checkout a working example here.

Foreignism

what is hello.component.html? – Quilting

@Quilting it is the template file (in HTML) of the specific component, in this case HelloComponent. – Overwork

Answer 3

I have same problem when I want to emit from child to parent. However, due to VS Code's auto import, it imported from event rather than angular/core. Firstly, disable auto import in VS Code.

Then, if your import is like this

import { EventEmitter } from 'events';

Change it to

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

Jacy