SAP-samples / ui5-webcomponents-sample-angular

UI5 Web Components Sample TODO application built with Angular.
https://sap-samples.github.io/ui5-webcomponents-sample-angular/
Apache License 2.0
37 stars 13 forks source link

Two-way data binding #32

Open bsrdjan opened 3 years ago

bsrdjan commented 3 years ago

Thank you for all three sample apps (angular, react, vue), really helpful in evaluations and discussions,

Would it be possible to extend all three apps, with the two-way binding, even the simplest way?

Like for example: two text fields and one checkbox, which can be edited in UI, for view to model changes. And one button, with the click logic to swap the text fields’ bound data values and toggle the checkbox bound data value, for model to view changes?

The reason I am asking is that two-way binding looks like a kind of challenge.

Angular tutorial

You can use two-way data binding with the following components: CheckBox, RadioButton, Input, DatePicker, Switch, TextArea. In order to use it, you have to use a library called Origami ...

React tutorial

Data binding not mentioned at all, only event binding. There are more possibilities in React, one could be shown as example.

Vue tutorial

v-model binding doesn’t work as expected for custom elements. In order to use two way data binding, you should bind and update the value yourself like this

<ui5-input
    :value="inputValue"
    @input="inputValue = $event.target.value">
</ui5-input>
nemethmik commented 3 years ago

React doesn't support two-way data binding, there is no such a concept there. You can mimic tow-way binging by adding an event handler. I used to use both Angular and React, both are excellent frameworks, but since we have Lit 2.0 we don't need these frameworks any more. Lit is simply awesome.