Nested Child Component not passing Info to Parent Component

0
votes

I am learning how to pass information between parent and child components. I understand information is passed through @Inputs and @Outputs.

For example, I have a parent class which instantiates a basic string variable called

test: string;

and assign it a random string like 

  ngOnInit() {
    this.test = "message from parent";
   }

I pass this variable through a couple of nested child classes using @Input and in my console.log(test) in my final child class, I successfully return the value I receive from my parent. However, the real issue starts when I change it in the child class. In my child class, I have a function:

@Output() testChange: EventEmitter<any> = new EventEmitter();

newSpecifier(){
    this.test= "this changed"
    this.testChange.emit(this.test)

  }

and a button to just trigger this function. However, when I click the button, nothing happens to the parent "test". I have a div in the original parent HTML with the {{this.test}} value, but it does not change when I click the button. I don't think my information is passing back to the parent component correctly. Any help pointing me in the right direction would be great, thanks in advance!

3
angular
Can you provide a snippet, I can't figure out the problem. - Sébastien Bousquet

3 Answers

2
votes

When you are emitting some event from child component, parent component needs to have some kind of way to 'listen' to those events. In parent-child dynamic, this mechanism is supported by event listener methods that you must implement inside parent component. Let's look at your case.

child.component.ts:

@Output() testChange: EventEmitter<any> = new EventEmitter();

newSpecifier(){
    this.test= "this changed"
    this.testChange.emit(this.test)
}

parent.component.html:

<div>
    <child-component (testChange)="onTestChangeEventHandler($event)"> </child-component>
</div>

parent.component.ts:

onTestChangeEventHandler(event) {
     // here you can do whatever you want with emmited value from child component
     console.log(event);
}

You can read more here: https://angular.io/guide/component-interaction

0
votes
you need to listen to the emitted changes in your parent component. Below is an example on how you can achieve what you are trying to do

Parent-HTML
<parent-component>
   <child-component (testchange)="onTestChange($event)></child-component>
</parent-component>

In Parent--ts file
 ------------------
    onTestChange(event)
    {
      this.test=event
    }
0
votes

in your child component change the Output to @Input() myVariable: string. Then in your parent's .html file or the parent 'html template', where you are rendering the child component, simply pass in the value by property binding. so the HTML code in your parent would look like this

`
<child-component [myVariable]="this.test"></child-component>
`

This will pass the value from the parent to the child.