Two-way binding not working in custom component in Angular

I'm trying to create a custom Angular component with @Input() and @Output() to support two-way binding using [(value)], but it's not working as expected. The parent component is not getting updated when the value changes inside the child component.

Here's my code:

child.component.ts


import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
selector: 'app-custom-input',
template: `<input [value]="value" (input)="onInputChange($event)" />`
})
export class CustomInputComponent {
@Input() value: string = '';
@Output() valueChange = new EventEmitter<string>();

onInputChange(event: any) {
const newValue = event.target.value;
this.value = newValue;
this.valueChange.emit(newValue);
}
}

<app-custom-input [(value)]="parentValue"></app-custom-input>
<p>Value from child: {{ parentValue }}</p>

Continue reading...