Angular typically utilizes the injected KeyValueDiffers class in the constructor.

For your specific scenario, the code might resemble this:

import { KeyValueChanges, KeyValueDiffer, KeyValueDiffers } from '@angular/core';

export class Customer {
  firstName: string;
  favoriteColor: string;
}

@Component({
  selector: 'my-app',
  templateUrl: `./app.component.html`
})
export class AppComponent {
  private customerDiffer: KeyValueDiffer<string, any>;
  private customer: Customer;

  constructor(private differs: KeyValueDiffers) {}

  ngOnInit(): void {
    this.customer = new Customer();
    this.customerDiffer = this.differs.find(this.customer).create();
  }

  customerChanged(changes: KeyValueChanges<string, any>) {
    console.log('changes');
    /* If you want to see details then use
      changes.forEachRemovedItem((record) => ...);
      changes.forEachAddedItem((record) => ...);
      changes.forEachChangedItem((record) => ...);
    */
  }

  ngDoCheck(): void {
      const changes = this.customerDiffer.diff(this.customer);
      if (changes) {
        this.customerChanged(changes);
      }
  }
}

Example on Stackblitz

Another approach is to use setters on properties that require checking.

Further reading:

• Custom Differ Performance Tips

I am looking to directly subscribe to any changes on the model.

To achieve this, you can listen for model changes using the ngModelChange event binding.

Template:

<input type="text" (ngModelChange)="doSomething($event)" [ngModel]="customer.firstName">

Class:

doSomething(event) {
  console.log(event); // logs the updated model value
}

Check out the live demonstration here!

Monitoring changes within an object is not possible in this scenario. This is not Angular 1, so traditional watchers are not utilized here. An alternative approach would involve using observables.

Utilize the following form structure:

<form #f="ngForm">
  <input type="text" name="firstName" [(ngModel)]="customer.firstName">
  <input type="text" name="favoriteColor" [(ngModel)]="customer.favoriteColor">
</form>

The corresponding code snippet would be as follows:

@ViewChild('f') f;

ngAfterViewInit() {
  this.f.form.valueChanges.subscribe((change) => {
   console.log(change)
  })
}

To implement a callback mechanism, custom setters can be used:

class Client {
  private _name: string
  get name(): string {
    return this._name
  }
  set name(name: string) {
    this.callback(this._name, name)
    this._name = name
  }

  private _email: string
  get email(): string {
    return this._email
  }
  set email(email: string) {
    this.callback(this._email, email)
    this._email = email
  }

  callback: (oldValue, newValue) => void

  constructor(callback?: (oldValue, newValue) => void) {
    // Default to an empty function if no callback is provided
    this.callback = callback || (() => {})
  }
}

Simply assign the callback when creating the object:

this.client = new Client((oldValue, newValue) => console.log(oldValue, newValue))

// or

this.client = new Client()
this.client.callback = (oldValue, newValue) => console.log(oldValue, newValue)

Check out https://github.com/cartant/rxjs-observe for more information. It utilizes rxjs and the proxy pattern.

import { observe } from "rxjs-observe";

const person = { name: "Alice" };
const { observables, proxy } = observe(person);
observables.name.subscribe(value => console.log(name));
proxy.name = "Bob";

We have been given the challenge of upgrading a legacy Angular 1.x application to Angular 9. One key feature of this app is its integration with ESRI maps, thanks to the robust tools provided by the ESRI framework. The watchUtils from ESRI offer extensive functionality beyond just monitoring changes.

While ESRI's tools are impressive, there's one thing I miss from Angular 1 - the simplicity of $watch. Additionally, in our application, we deal with Entities and Models that require occasional observation.

To tackle this, I devised an abstract class named MappedPropertyClass. This class utilizes a Map for mapping class properties, making it easy to implement functions like toJSON efficiently.

One notable map within this class is _propertyChangeMap: a Map>;

Another valuable function we introduced is $watch, which accepts a string and a callback function for operations.

The versatility of this class allows for extension by Entities, components, or services.

I'm open to sharing my work; the only requirement is that your properties adhere to a specific format:

public get foo(): string {
    return this._get("foo");
}  
public set foo(value:string) {
    this._set("foo", value);
}

--------------------------------------------------------------------
import { EventEmitter } from '@angular/core';

export abstract class MappedPropertyClass {
    private _properties: Map<string, any>;
    private _propertyChangeMap: Map<string, EventEmitter<{ newvalue, oldvalue }>>;

    protected _set(propertyName: string, propertyValue: any) {
        let oldValue = this._get(propertyName);
        this._properties.set(propertyName, propertyValue);
        this.getPropertyChangeEmitter(propertyName).emit({ newvalue: 
    propertyValue, oldvalue: oldValue });
    }

    protected _get(propertyName: string): any {
        if (!this._properties.has(propertyName)) {
            this._properties.set(propertyName, undefined);
        } 
        return this._properties.get(propertyName);
    }

    protected get properties(): Map<string, any> {
        var props = new Map<string, any>();
        for (let key of this._properties.keys()) {
            props.set(key, this._properties.get(key));
        }

        return props;
    }

    protected constructor() {
        this._properties = new Map<string, any>();
        this._propertyChangeMap = new Map<string, EventEmitter<{ newvalue: any, 
        oldvalue: any }>>();
    }

    private getPropertyChangeEmitter(propertyName: string): EventEmitter<{ 
                         newvalue, oldvalue }> {
        if (!this._propertyChangeMap.has(propertyName)) {
            this._propertyChangeMap.set(propertyName, new EventEmitter<{ newvalue, 
            oldvalue }>());
        }
        return this._propertyChangeMap.get(propertyName);
    }

    public $watch(propertyName: string, callback: (newvalue, oldvalue) => void): 
    any {
        return this.getPropertyChangeEmitter(propertyName).subscribe((results) => 
        {
            callback(results.newvalue, results.oldvalue);
        });
    }
}