If we will make a property in Child component and somehow if it's a two-way bindable property, then Child would be able to set its value and as it's a two-way bindable property, then parent will also bind their property to this property. now if child changes value of this property, it will reflect at parent's created property.
see below example for more details:
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrl: './child.component.css'
})
export class ChildComponent {
@Input() customValue!: string;
@Output() customValueChange = new EventEmitter<string>();
onValueChange(value: string) {
this.customValueChange.emit(value);
}
}
ChildComponent.html
<input type="text" name="txtchild" [(ngModel)]="customValue" (ngModelChange)="onValueChange($event)">
Parent component:
<input type="text" name="txtParent" [(ngModel)]="txtParent"/>
<app-child [(customValue)]="txtParent"></app-child>
Parent.component.ts:
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrl: './parent.component.css'
})
export class ParentComponent {
txtParent: string="";
}
