Determine in Angular whether a 'change in value for a component' is a result of a detected change

Question

We're using the 'switch' component of DevExtreme and have set the onValueChanged event of that component to execute some action.

However, this is also triggered when the property value of the bound object is changed (as a result of updating the underlying data).

But we only want to perform the action, when the user changes the switch value.

So how can I detect whether the change is a result of a ChangeDetection update?

Html-code:

<dx-form [formData]="myobject" [colCount]="6">
  <dxi-item dataField="myobjectprop" editorType="dxSwitch" [editorOptions]="{ value:myobject.myobjectprop, onValueChanged:someaction }" cssClass="switch-right-label">
    <dxo-label text="my property" location="right" alignment="left">
    </dxo-label>
  </dxi-item>
</dx-form>

ts-code

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-test-my-object',
  templateUrl: './test-my-object.component.html',
  styleUrls: ['./test-my-object.component.scss']
})
export class TestMyObjectComponent implements OnInit {

  myobject: MyObject;
  onObjectChanged: BehaviorSubject<MyObject>;

  constructor() { 
    this.onObjectChanged = new BehaviorSubject(new MyObject());
  }

  ngOnInit(): void {
    this.onObjectChanged
      .subscribe(newmyobject => {
        this.myobject = newmyobject;
      });
  }

  someaction = (): Promise<boolean> => {
    // Do something when the data changed
    // - but not when change is a result of using using 'changeObject' <= how to know that???
    return new Promise((resolve, reject) => { /*...*/ });
  }

  changeObject(): void {
    const obj = new MyObject();
    obj.myobjectprop = !this.myobject.myobjectprop;
    this.onObjectChanged.next(obj);
  }  
}

export class MyObject {
  myobjectprop: boolean;
}

Answer 1

Finally found the solution (at least when using the DevExteme components).

Basically one needs to check, whether the event property of the eventobject passed thought the event handler, is set (or not).

Example:

someaction = (e): Promise<boolean> => {
  if (e.event === undefined) {
    // event was triggered by code
    return Promise.resolve(false);
  }
  return new Promise((resolve, reject) => { /*...*/ });
}