I need to retrieve the text from a text area in my child component and display it on the parent component while keeping it up to date.
Someone mentioned that @Input in Angular 4 is meant for two-way binding. However, I am unable to achieve this and I'm not sure why.
To work around this issue, I have implemented an @Output to send the information to the parent component. But if Input is supposed to handle this (in a way unknown to me), I would prefer to utilize that instead.
Here is an example of my Parent Component:
import { Component } from '@angular/core';
@Component({
selector: 'app-settings',
templateUrl: './settings.component.html',
})
export class SettingsComponent {
private studyDesignText = 'Text';
constructor() {
}
public handleStudyDesignUpdated(designText: any) {
this.studyDesignText = designText;
}
}
Its HTML:
<div class="section section-trials-settings-parent light rounded">
<div class="section section-trials-settings-child">
<div class="pure-g">
<div class="pure-u-1-1">
<app-settings-study-design
[studyDesignText]="studyDesignText">
</app-settings-study-design>
</div>
</div>
</div>
</div>
My child component:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-settings-study-design',
templateUrl: './settings-study-design.component.html',
})
export class SettingsStudyDesignComponent implements OnInit {
@Input() studyDesignText: string;
constructor() {
}
ngOnInit() {
super.onInit();
loadControls();
}
loadControls(): void {
this.startAllTextAreas();
}
private startAllTextAreas() {
this.startTextArea('study-design-textarea');
}
private startTextArea(htmlId: string) {
// code to configure my text area; it's right...
}
If I update the value in the text area and emit a signal using @Output to notify my parent component and log the value in the console, the logged value remains the initial one. My friend tried the same approach and it worked for them.
What could be the reason behind this issue?