Suggest an edit

Improve this article

Refine the answer for “How does the ViewModel provide two-way data binding?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**Two-way data binding** is a mechanism through which the **View and the ViewModel automatically synchronize with each other**:
if a value changes in the view model, the interface updates,
and vice versa: if the user changes data in the interface, the ViewModel's property updates.

---

### 1. **The essence of the mechanism**

> The ViewModel stores data, and the View "subscribes" to it.
>
> When data changes in the ViewModel, the View updates its display.
> When the user enters something in the View, the ViewModel gets the new value.

This creates a **reactive connection** between them, so no code for updating the interface or passing data needs to be written.

---

### 2. **How this works technically**

#### 1. **The ViewModel contains observable fields**

Instead of ordinary variables, **observable properties** are used: objects that notify subscribers of changes.

Example in Kotlin (Android):

```kotlin
class LoginViewModel : ViewModel() {
    val username = MutableLiveData<String>()
    val password = MutableLiveData<String>()
}
```

Example in C# (WPF / .NET):

```csharp
public class LoginViewModel : INotifyPropertyChanged {
    private string _username;
    public string Username {
        get => _username;
        set {
            _username = value;
            OnPropertyChanged(nameof(Username));
        }
    }
}
```

---

#### 2. **The View binds UI elements to these properties**

The interface "connects" elements directly to the ViewModel.

In Android (XML):

```xml
<EditText
    android:text="@={viewModel.username}" />
```

The `@={...}` sign means **two-way** binding:
if the user changes the text, `viewModel.username` updates automatically.

In WPF (XAML):

```xml
<TextBox Text="{Binding Username, Mode=TwoWay}" />
```

---

#### 3. **The system tracks changes**

An observer works under the hood:

- when a value changes in the ViewModel → the View gets notified and updates the UI;
- when it changes in the View → the system calls the ViewModel's setter and passes the new value.

---

### 3. **What happens step by step**

1. The user enters text in an input field.
2. The UI framework (through the binding mechanism) calls the setter in the ViewModel.
3. The ViewModel updates its observable property.
4. All subscribed Views (or other components) get notified and change their display.

This way, **everything stays in sync** without manual code.

---

### 4. **Advantages of this connection**

There is no need to manually update the UI or pass values.
The amount of boilerplate code (the "glue" between layers) is reduced.
The interface always shows the current state of the data.
The ViewModel can be tested separately from the interface.

---

### 5. **Support across platforms**

| Platform | Binding mechanism |
|---|---|
| **Android** | `LiveData`, `DataBinding`, `ObservableField`, `Flow` |
| **.NET / WPF / MAUI** | `INotifyPropertyChanged`, `Binding Mode=TwoWay` |
| **Vue.js / Angular / React** | reactive properties (`v-model`, `ngModel`, `useState`) |
| **SwiftUI** | `@State`, `@Binding`, `@Published` annotations |

---

**Summary:**

> Two-way data binding lets the View and the ViewModel "communicate" without direct calls.
>
> The ViewModel stores observable properties,
> the View binds elements to them,
> and the framework automatically synchronizes both directions:
> **the logic and the interface stay in constant agreement without extra code.**

Markdown · drag & drop images · ⌘B / ⌘I shortcuts507 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.