Hiprup

What is the MVVM architecture in Angular?

Angular loosely follows the MVVM (Model-View-ViewModel) pattern. Each component combines a view (template) with a viewmodel (component class) that holds state and logic; the model is the data the app works with.

  • Model — the data: TypeScript classes, interfaces, services, HTTP responses.

  • View — the HTML template; declarative, reads from the viewmodel via bindings.

  • ViewModel — the component class; exposes properties and methods; mediates between view and model.

  • Two-way binding[(ngModel)] syncs view and viewmodel automatically.

  • Separation of concerns — the template focuses on layout; the class focuses on behavior; services hold business logic.

  • Loose interpretation — Angular doesn't strictly enforce MVVM; the spirit is what matters.

Map cleanly: Model = data + services, View = template, ViewModel = the component class with bindings. The framework handles two-way sync — no manual observer wiring like classic MVVM.

What is the MVVM architecture in Angular? | Hiprup