Two-way binding is actually a one way binding with changes synchronized back to the same state
@Component({
template: `<input [(ngModel)]="value">`
// This is syntactic sugar of the following
template: `<input [ngModel]="value" (ngModelChange)="value = $event">`
})
class MyComponent {
value: string;
}
Controlled inputs are actually same as two-way bindings - just more verbose in syntax
class MyComponent extends React.Component {
state = {
value: '',
};
render() {
return <input value={this.state.value} onChange={e => this.setState({value: e.target.value})} />
}
}
<input [ngModel]="value" (ngModelChange)="value = $event">
<input value={this.state.value} onChange={(e) => this.setState({value: e.target.value})} />
Looks
the samequite similar, isn't it? =)
Examples in Angular how to implement decoupled reactive two-way bindings: https://stackblitz.com/edit/angular-two-way-magic