How to detect change in dynamic objects property?

Question

I have 5 dynamic objects out of those 5, I am referring to only 2 here:

objCache.tab1.page1.status: when cache enable from tab
objCache.page1.status: when cache enable from page

In my html and .ts file, I will use one of the above objects dynamically based on my cache level.

I am passing status as input parameter "receivedStatus" to my child component as below, where right side value (xyz...) will be either from object 1 or object 2 from above 2 dynamic objects based on cache level. I don't want to use if or switch condition in html for dynamic objects.

<child-component [receivedStatus]="xyz..."></child-component>

As in above syntax the right hand side assigned value is dynamic, child component input parameter don't detect value change event.

Is there any other way to track status change event only when status changed, I don't want any function which repeatedly call in DOM, it should call only when dynamic object status value got changed.

Naren Murali · Accepted Answer · 2025-07-01 05:58:44Z

0

Assuming the property is xyz which contains the complex object.

<child-component [receivedStatus]="xyz"></child-component>

All you need to do, is create a new memory reference (Remember objects and arrays (non-primitives) are stored as memory references and not actual values, so updates to the inner properties do not affect the memory reference.

So, we need to create a new memory reference using array/object destructuring, perform this after the update operations are done to xyz.

updateOperation() {
  this.xyz.tab1.page1.status = true;
  this.xyz = { ...this.xyz }; // use destructuring to create a new memory reference.
}

When you create the new memory reference the child component will detect that one of the inputs has changed.

You have to place the logic that modifies the component based on the new input, in the ngOnChanges hook, which fires only when the input bindings change.

ngOnChanges() {
  ...
  // logic to update the component based on inputs
  ...
}

answered Jul 1 at 5:58

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sandip - Frontend Developer Jul 1 at 6:01

my object can be any from your assumption like this.xyz.tab1.page1.status OR this.xyz.page1.status OR this.status updateOperation() { this.xyz.tab1.page1.status = true; this.xyz = { ...this.xyz }; // use destructuring to create a new memory reference. }

Naren Murali Jul 1 at 6:02

@Sandip-FrontendDeveloper as long as memory reference is updated, ngOnChanges fires then we can update based on the new input using ngOnChanges

Naren Murali Jul 1 at 6:12

@Sandip-FrontendDeveloper If it is a individual property (this.status), pass it separately as a @input property.

Abdulla Nilam · Accepted Answer · 2025-07-01 06:21:13Z

0

You can use @Input() setter or ngOnChanges

Ex

export class ChildComponent {
  private _status: any;

    @Input()
    set receivedStatus(value: any) {
        if (value !== this._status) {
            this._status = value;
            this.onStatusChanged(value);
        }
    }
    get receivedStatus() { return this._status; }

    private onStatusChanged(newVal: any) {
    // handle it here
    console.log('new status', newVal);
    }
}

answered Jul 1 at 6:21

Abdulla Nilam

39.6k18 gold badges85 silver badges114 bronze badges

Collectives™ on Stack Overflow

How to detect change in dynamic objects property?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related