Angular EventEmitter Error: Expected 0 type arguments, but got 1

Question

I am getting the type error, "Expected 0 type arguments, but got 1" despite following this tutorial to a T. https://youtu.be/I317BhehZKM?t=57s

I have specified:

  newUserInfoComplete:boolean = false

yet I am getting the error specified above on <boolean> in this line:

  @Output() newUserInfoCompleteEvent = new EventEmitter <boolean> ();

Also, if I simply omit <boolean> I get this error:

Argument of type 'boolean' is not assignable to parameter of type 'string'.

and this.NewUserInfoComplete is underlined here:

this.newUserInfoCompleteEvent.emit(this.newUserInfoComplete);

Here is my component:

import { Component, OnInit, Output } from '@angular/core';
import { slideToRight } from '../../../../router.animations';
import { Router, ActivatedRoute, UrlSegment } from '@angular/router';
import { EventEmitter } from 'protractor';

@Component({
  selector: 'app-new-user-input',
  templateUrl: './new-user-input.component.html',
  styleUrls: ['./new-user-input.component.css'],
  animations: [slideToRight()]
})
export class NewUserInputComponent implements OnInit {

  newUserInfoComplete:boolean = false

  @Output() newUserInfoCompleteEvent = new EventEmitter <boolean> ();

  constructor(private router: Router, r: ActivatedRoute) {
    r.url.subscribe((s: UrlSegment[]) => {
      console.log("url", s); //https://vsavkin.com/angular-router-understanding-router-state-7b5b95a12eab
    });
  }

  ngOnInit() {
  }



  sendNewUserInfoComplete(){
    this.newUserInfoCompleteEvent.emit(this.newUserInfoComplete);
  }


  displaySibling() {
    console.log(this.router);
    this.router.navigate(['../', { outlets: { newuserorginfo: ['newuserorginfo'] } }])
  }

  closeBlade() {
    this.router.navigate([{ outlets: { newuserinput: null } }]);
  }

}

PSA: Please stop adding answers that just say "Import from angular instead of some other path." The top answer already says this. — General Grievance, May 01 '23 at 19:59

score 295 · Accepted Answer · edited May 01 '23 at 19:51

295

Try importing EventEmitter from @angualar/core instead of from protractor:

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

edited May 01 '23 at 19:51

General Grievance

4,555
31
31
45

answered May 23 '18 at 18:38

ConnorsFan

70,558
13
122
146

7

By default it was importing the EventEmitter from 'Events'. Just be sure to see where its being imported from. – tony2tones Jul 06 '19 at 10:35
3

My import was : import { EventEmitter } from 'events'. Changing it to @angular/core fixed it. – CFNinja Sep 18 '19 at 15:46
4

Yeah I'm using vscode and I'm not sure why it auto-imported from the wrong place. This was definitely my problem – Callat Sep 27 '19 at 18:49
3

VS Code still auto-imports from protractor, this answer solved the problem for me as well. Thanks. – static_null Sep 09 '20 at 23:02
VS Code auto import it from `stream` – Ali Nov 05 '22 at 16:36

score 9 · Answer 2 · answered May 23 '18 at 18:40

I forgot to check my imports! Darn. I was using PROTRACTOR'S event emitter and not angular core Event Emitter

import { EventEmitter } from '@angular/core';
import { Component, OnInit, Output } from '@angular/core';
import { slideToRight } from '../../../../router.animations';
import { Router, ActivatedRoute, UrlSegment } from '@angular/router';

@Component({
  selector: 'app-new-user-input',
  templateUrl: './new-user-input.component.html',
  styleUrls: ['./new-user-input.component.css'],
  animations: [slideToRight()]
})
export class NewUserInputComponent implements OnInit {

  newUserInfoComplete = false;

  @Output() newUserInfoCompleteEvent = new EventEmitter<boolean>();

  constructor(private router: Router, r: ActivatedRoute) {
    r.url.subscribe((s: UrlSegment[]) => {
      console.log("url", s); //https://vsavkin.com/angular-router-understanding-router-state-7b5b95a12eab
    });
  }

  ngOnInit() {
  }



  sendNewUserInfoComplete() {
    this.newUserInfoCompleteEvent.emit(this.newUserInfoComplete);
  }


  displaySibling() {
    console.log(this.router);
    this.router.navigate(['../', { outlets: { newuserorginfo: ['newuserorginfo'] } }])
  }

  closeBlade() {
    this.router.navigate([{ outlets: { newuserinput: null } }]);
  }

}

score 5 · Answer 3 · edited May 02 '23 at 03:37

5

As mentioned in the top answer, don't import EventEmitter from 'protractor', import it from '@angular/core'.

Why it has happened: because you used EventEmmiter before importing it, so in that case it automatically imports from 'protractor' module.

edited May 02 '23 at 03:37

General Grievance

4,555
31
31
45

answered Mar 19 '20 at 07:12

Husain Ali

155
1
9

score 1 · Answer 4 · answered May 23 '18 at 18:22

import { Component, Output } from '@angular/core';
import { slideToRight } from '../../../../router.animations';
import { Router, ActivatedRoute, UrlSegment } from '@angular/router';
import { EventEmitter } from 'protractor';

@Component({
  selector: 'app-new-user-input',
  templateUrl: './new-user-input.component.html',
  styleUrls: ['./new-user-input.component.css'],
  animations: [slideToRight()]
})
export class NewUserInputComponent {

  newUserInfoComplete = false;
  @Output() newUserInfoCompleteEvent = new EventEmitter <boolean> ();

  constructor(private router: Router, r: ActivatedRoute) {
    r.url.subscribe((s: UrlSegment[]) => {
      console.log("url", s);
    });
  }
  sendNewUserInfoComplete(){
    this.newUserInfoCompleteEvent.emit(!!this.newUserInfoComplete);
  }


  displaySibling() {
    console.log(this.router);
    this.router.navigate(['../', { outlets: { newuserorginfo: ['newuserorginfo'] } }])
  }

  closeBlade() {
    this.router.navigate([{ outlets: { newuserinput: null } }]);
  }

}

try this

when you assign a variable you dont have to set the type of data. TS automatically set it for you. and if you dont implement the Oninit delete it — ignacioSG, May 23 '18 at 18:23
Thank you so much for the 'try this' every little bit helps!! Didn't fix it but I found the problem bc of you none the less.... knew something looked funky — imnickvaughn, May 23 '18 at 18:37

Angular EventEmitter Error: Expected 0 type arguments, but got 1

4 Answers4