Angular EventEmitter Error: Expected 0 type arguments, but got 1
AngularTypescriptParent ChildAngular 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';