When attempting to transfer information from a child to a parent using event emitters and output, an error is encountered:
Argument of type 'Event' is not assignable to parameter of type 'string[]'.
Type 'Event' is missing the following properties from type 'string[]': length, pop, push, concat, and 29 more.ngtsc(2345)
This is the code snippet from the child component:
@Component({
selector: 'app-calculator-buttons',
templateUrl: './buttons.component.html',
styleUrl: './buttons.component.css'
})
export class ButtonsComponent {
public firstRow:string[]=['7','8','9','+','='];
public secondRow:string[]=['4','5','6','*','/'];
public thirdRow:string[]=['1','2','3','-','AC'];
public fourthRow:string[]=['0','.','(',')'];
@Output()
public onNewResult:EventEmitter<string[]> = new EventEmitter();
public screenValues:string[]=[];
clear():void{
console.log("Cleared");
let screen=document.getElementById("screen") as HTMLInputElement;
screen.value="";
}
operations():void{
let screen=document.getElementById("screen") as HTMLInputElement;
this.screenValues.unshift(screen.value);
let operation:number=eval(screen.value);
screen.value=operation.toString();
this.screenValues[0]+="= "+screen.value;
this.emitResult();
}
monitor(index:string):void{
let screen=document.getElementById("screen") as HTMLInputElement;
screen.value+=index;
}
emitResult():void{
this.onNewResult.emit({...this.screenValues});
}
}
This is the code snippet from the parent component:
import { Component } from '@angular/core';
@Component({
selector: 'app-main-page',
templateUrl: './main-page.component.html',
styleUrl: './main-page.component.css'
})
export class MainPageComponent {
onNewResult(array:string[]):void{
console.log("Received Result");
console.log({array});
}
}
Here is where the $event is used to receive the event from the child component:
<div class="container bg-secondary rounded my-2 p-2" id="container">
<calculator-body (onNewResult)="onNewResult($event)"></calculator-body>
<app-calculator-buttons></app-calculator-buttons>
</div>
Using Angular and Typescript, how can I resolve this error?
I attempted to pass an array of strings from a child component to a parent component by utilizing @Output and EventEmitter. Although the method successfully accesses the child component (as shown in the console), it does not enter the component. The error indicates that $event cannot be assigned to the type array of strings.