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

score 45 · Accepted Answer · answered Apr 18 '18 at 13:58

45

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. :)

answered Apr 18 '18 at 13:58

Roberto Zvjerković

9,657
4
26
47

score 1 · Answer 2 · edited Jul 18 '18 at 15:09

1

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.

edited Jul 18 '18 at 15:09

Philipp Ludwig

3,758
3
30
48

answered Apr 18 '18 at 14:18

elanpras

29
1

what is hello.component.html? – ishandutta2007 Mar 24 '19 at 23:01
@ishandutta2007 it is the template file (in HTML) of the specific component, in this case `HelloComponent`. – Buhake Sindi Mar 01 '21 at 13:55

score 1 · Answer 3 · edited Apr 06 '20 at 15:27

1

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';

edited Apr 06 '20 at 15:27

Zoe

27,060
21
118
148

answered Apr 06 '20 at 15:19

Lokindra Dangi

11
1

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

3 Answers3