Carlos Cifuentes
AngularJS → Angular reference

ng-model in modern Angular

ng-model has two successors: reactive forms (FormControl) for real forms, and [(ngModel)] from FormsModule for simple two-way binding.

Before · AngularJS
<input type="text" ng-model="vm.name">
<p>Hello {{ vm.name }}</p>
After · Angular
// component
name = new FormControl('', { nonNullable: true });

<!-- template -->
<input type="text" [formControl]="name" />
<p>Hello {{ name.value }}</p>

What changes

  • Reactive forms keep the state in the component, typed and testable.
  • [(ngModel)] is the closest one-to-one replacement and, from Angular 17.2, also accepts a signal.
  • ng-model-options (debounce, updateOn) maps to the updateOn option or to RxJS operators on valueChanges.

Migration tip. Use the migration to move validation rules out of templates and into typed form definitions. It is where most hidden business rules live.

Related

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn