In my opinion, one of the best ways to address your problem is by implementing a decorator that automatically replaces the original field with a property. This allows you to create a SimpleChanges object on the setter method, similar to how Angular handles notifications. Alternatively, you could define a different interface for these notifications while following the same general principle.

import { OnChanges, SimpleChanges, DoCheck, SimpleChange } from '@angular/core';

function Watch() : PropertyDecorator & MethodDecorator{
    function isOnChanges(val: OnChanges): val is OnChanges{
        return !!(val as OnChanges).ngOnChanges
    }
    return (target : any, key: string | symbol, propDesc?: PropertyDescriptor) => {
        let privateKey = "_" + key.toString();
        let isNotFirstChangePrivateKey = "_" + key.toString() + 'IsNotFirstChange';
        propDesc = propDesc || {
            configurable: true,
            enumerable: true,
        };
        propDesc.get = propDesc.get || (function (this: any) { return this[privateKey] });

        const originalSetter = propDesc.set || (function (this: any, val: any) { this[privateKey] = val });

        propDesc.set = function (this: any, val: any) {
            let oldValue = this[key];
            if(val != oldValue) {
                originalSetter.call(this, val);
                let isNotFirstChange = this[isNotFirstChangePrivateKey];
                this[isNotFirstChangePrivateKey] = true;
                if(isOnChanges(this)) {
                    var changes: SimpleChanges = {
                        [key]: new SimpleChange(oldValue, val, !isNotFirstChange)
                    }
                    this.ngOnChanges(changes);
                }
            }
        }
        return propDesc;
    }
}

// Usage
export class MyClass implements OnChanges {


    //Properties what I want to track !
    @Watch()
    myProperty_1: boolean  =  true
    @Watch()
    myProperty_2 =  ['A', 'B', 'C'];
    @Watch()
    myProperty_3 = {};

    constructor() { }
    ngOnChanges(changes: SimpleChanges) {
        console.log(changes);
    }
}

var myInatsnce = new MyClass(); // outputs original field setting with firstChange == true
myInatsnce.myProperty_2 = ["F"]; // will be notified on subsequent changes with firstChange == false

To implement proper checks when setting or getting a variable, you can use the following approach:

public set myProperty_2(value: type): void {
 if(value) {
  // Perform necessary checks
 }

 this._myProperty_2 = value;
}

If you need to retrieve the value later, you can use the following:

public get myProperty_2(): type {
  return this._myProperty_2;
}

By using these methods, you can ensure that all required validations are in place whenever the myProperty_2 property is accessed.

Here's a small demo showcasing this concept: https://stackblitz.com/edit/angular-n72qlu

If you're looking to monitor DOM changes in order to track any modifications made to your element, then these helpful hints and tips might just solve your problem. Follow the simple steps below:

Step 1: Begin by referencing your element like so:

In HTML:

<section id="homepage-elements" #someElement>
....
</section>

In the TS file of your component:

@ViewChild('someElement')
public someElement: ElementRef;

Step 2: Next, create an observer to monitor changes to that element. Make sure your component's ts file implements both AfterViewInit and OnDestroy, and then implement the ngAfterViewInit() function as follows (OnDestroy will have a role later):

private changes: MutationObserver;

ngAfterViewInit(): void {
  console.debug(this.someElement.nativeElement);

  setInterval(() => {
    this.renderer.setAttribute(this.someElement.nativeElement, 'my_custom', 'secondNow_' + (new Date().getSeconds()));
  }, 5000);

  this.changes = new MutationObserver((mutations: MutationRecord[]) => {
      mutations.forEach((mutation: MutationRecord) => {
        console.debug('Mutation record fired', mutation);
        console.debug(`Attribute '${mutation.attributeName}' changed to value `, mutation.target.attributes[mutation.attributeName].value);
      });
    }
  );

  this.changes.observe(this.someElement.nativeElement, {
    attributes: true,
    childList: true,
    characterData: true
  });
}

You'll notice the console starts logging any changes made to that element.

This is demonstrated further with another example where two mutation records are fired due to a change in class:

setTimeout(() => {
  this.renderer.addClass(this.someElement.nativeElement, 'newClass' + (new Date().getSeconds()));
  this.renderer.addClass(this.someElement.nativeElement, 'newClass' + (new Date().getSeconds() + 1));
}, 5000);

this.changes = new MutationObserver((mutations: MutationRecord[]) => {
    mutations.forEach((mutation: MutationRecord) => {
      console.debug('Mutation record fired', mutation);
      if (mutation.attributeName == 'class') {
        console.debug(`Class changed, current class list`, mutation.target.classList);
      }
    });
  }
);

Console log displays these changes for reference.

Lastly, don't forget about the cleanup step in OnDestroy:

ngOnDestroy(): void {
  this.changes.disconnect();
}

For more information, check out this Resource: Listening to DOM Changes Using MutationObserver in Angular

If you need to utilize ChangeDetectorRef, follow these steps:

 constructor(private cd: ChangeDetectorRef) {
          // Trigger change detection for the current component
            // The injected instance of ChangeDetectorRef can be accessed through this.cd
            this.cd.detectChanges();

            // Alternatively, trigger change detection for the entire application
            // The ApplicationRef instance can be accessed through this.appRef
            this.appRef.tick();
}