React one-way data binding vs Angular two-way data binding

Question

After hours of reading blog posts, I understand that React has one-way data binding, and Angular has two-way. But I don't actually know what that means....

React

import { useState } from 'react';
import Switch from "./switch";

function App() {
  const [value, setValue] = useState(false);
  return (
    <Switch
      isOn={value}
      handleToggle={() => setValue(!value)}
    />
  );
}

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <switch [ngModel]="value" (ngModelChange)="value = $event"></switch>
  `,
})
export class AppComponent {
  value = false;
}

Those look functionally identical to me.

Can someone help explain the difference?

Your angular example isn't two-way binding. Two-way binding looks like `[(something)]="something"`. — Karl Bielefeldt, Nov 25 '20 at 15:36

score 0 · Answer 1 · answered Nov 30 '20 at 07:51

In your examples, both frameworks make use of two one-way bindings. That means in both cases there is a one way binding from the JavaScript datamodel to the HTML and a second binding from the HTML to the JavaScript model.

A "Two-way-Binding" would be (like @Karl Bielefeldt mentioned) to write (in Angular) someling like [(myHTMLAttribute)]="myJavaScriptValue"

The important difference is that in the second approach your value could be changed directly from both sides (HTML / JavaScript). While the one-way-binding approach makes it very explicit. The JavaScript value is reflected in the HTML. And if someone changes the value in HTML, the JavaScript value is NOT directly changed. Instead a method is called (which is under your control) and there you can decide to update the JavaScript value.

Two-way bindings safe some code you would have to write if you would use only one-way-binding.
On the other side it makes your code less explicit and partially harder to understand and less easy to debug.
At least thats what i think. :-)

React one-way data binding vs Angular two-way data binding

1 Answers1