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

AngularTypescriptParent Child

Angular Problem Overview


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 } }]);
  }

}

Angular Solutions


Solution 1 - Angular

Try importing EventEmitter from Angular instead of from protractor:

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

Solution 2 - Angular

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 } }]);
  }

}

Solution 3 - Angular

You just got the imports wrong, you need to import EventEmitter from @angular/core

import { EventEmitter } from @angular/core

Solution 4 - Angular

245

Import EventEmitter from Angular instead of from stream:

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

not this

> import { EventEmitter } from 'stream'; “>”

Solution 5 - Angular

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.

Solution 6 - Angular

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

Please make sure EventEmitter imported on @angular/core otherwise error.

I was mistaken. I was importing-

 import { EventEmitter } from 'events';

so got error getting

Solution 7 - Angular

Don't import with events like below:

import { EventEmitter } from 'events';

Try to import like below:

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

Solution 8 - Angular

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

Solution 9 - Angular

just replace the automatically added import statement :

    import * as EventEmitter from 'events';        

with

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionimnickvaughnView Question on Stackoverflow
Solution 1 - AngularConnorsFanView Answer on Stackoverflow
Solution 2 - AngularimnickvaughnView Answer on Stackoverflow
Solution 3 - AngularKelvin OnkundiView Answer on Stackoverflow
Solution 4 - AngularSonali MangrindaView Answer on Stackoverflow
Solution 5 - AngularHusain AliView Answer on Stackoverflow
Solution 6 - AngularAvinash DewanganView Answer on Stackoverflow
Solution 7 - AngularMahadevan AnnamalaiView Answer on Stackoverflow
Solution 8 - AngularignacioSGView Answer on Stackoverflow
Solution 9 - AngularTechie VineetView Answer on Stackoverflow