将值从子组件传递到父组件时无法读取“目标”属性

Question

In my project student is child component of the parent app component.

The student component template has an input element as below:

<input type='text' #inputbox (keyup)='onkeyUp(inputbox.value)'>

The student component has defined onkeyUp event handler as below:

  @Component({
  outputs: ['childevent']
  ... 
  childevent = new EventEmitter();
  onkeyUp(value: any) {
  this.childevent.emit(value);
  }

The parent app component looks as below:

...
<label>Value of Child Component: </label> {{Cdata.target.value}}
<app-student (childevent)='Cdata=$event'></app-student>

Here, {{Cdata.target.value}} is throwing an error:

ERROR TypeError: Cannot read property 'target' of undefined

As per my understanding, $event has the entire childevent payload which is passed to the Cdata event handler. And, event.target.value returns the current contents of childevent

Please let me know if I have correct understanding. I am referring to angular docs

I have tried to use optional chaining

<label>Value of Child Component: </label> {{Cdata?.target.value}}

But still getting an error

ERROR TypeError: Cannot read property 'value' of undefined

Answer 1

The problem is that in your app template , Cdata does not yet exist when the template is rendered for the first time. You can solve this by changing the code as follows:

<label>Value of Child Component: </label> {{ Cdata ? Cdata.target.value : 'missing' }}

Answer 2

I think you just need to change the definition of the EventEmitter , you can check :

@Output() childevent = new EventEmitter();