Carlos Cifuentes
AngularJS → Angular reference

$watch in modern Angular

$watch splits into three tools: computed for derived values, effect for side effects, and RxJS for anything involving time or requests.

Before · AngularJS
$scope.$watch('vm.query', function (value) {
  if (value) { vm.search(value); }
});
After · Angular
query = signal('');

results = toSignal(
  toObservable(this.query).pipe(
    debounceTime(300),
    filter(q => q.length > 0),
    switchMap(q => this.api.search(q)),
  ),
  { initialValue: [] },
);

What changes

  • A watcher that only recalculates a value becomes a computed signal.
  • A watcher that triggers a request becomes an observable pipeline, with debouncing and cancellation built in.
  • Deep watches ($watch with true, $watchCollection) become immutable updates: replace the array or object instead of mutating it.

Migration tip. Count your watchers during the assessment. Screens with many of them are usually the slow ones, and they gain the most from the migration.

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