How does the ViewModel provide two-way data binding?

Design PatternsMiddle~2 min read

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

The user enters text in an input field.
The UI framework (through the binding mechanism) calls the setter in the ViewModel.
The ViewModel updates its observable property.
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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.