Within my project, the student component is considered a child component of the main app component.
Inside the template of the student component, there is an input element defined like so:
<input type='text' #inputbox (keyup)='onkeyUp(inputbox.value)'>
The student component includes an event handler named onkeyUp:
@Component({
outputs: ['childevent']
...
childevent = new EventEmitter();
onkeyUp(value: any) {
this.childevent.emit(value);
}
Looking at the parent app component code snippet:
...
<label>Value of Child Component: </label> {{Cdata.target.value}}
<app-student (childevent)='Cdata=$event'></app-student>
An issue arises with {{Cdata.target.value}}, specifically throwing this error:
Error TypeError: Cannot read property 'target' of undefined
From my perspective, $event contains the entire payload from the childevent and this data is passed to the Cdata event handler. The expression event.target.value should provide the current contents of childevent.
I have attempted to implement optional chaining:
<label>Value of Child Component: </label> {{Cdata?.target.value}}
However, this adjustment still results in an error:
Error TypeError: Cannot read property 'value' of undefined