How to subscribe to the property change of an object referenced within another object in rxjs

Question

I am really new to both Angular and RxJS. I am trying to create an Angular component which allows different objects to share a tree-structured data set.

Here's my scenario in an imaginary and simplified way - an Angular component to post an entire company structure to the server. This structure is a composite of multiple "StuffDto" object, which references each other as their manager. And all stuffs share a same company department structure map.

The multi-level structure map is like:

• Marketing Dept
  • Sales Dept
    • In-store Sales Team
    • On-site Sales Team
  • Advertisement Dept
    • Planner Team
    • Designer Team
• Manufacturing Dept
  • R&D Dept
    • Engineer Team
    • Researcher Team
  • QA Dept
    • Inspector Team
    • Assurance Team

Here's my StaffDto class which will be posted to the server directly upon submission.

export class StaffDto {
    id: string;
    name: string;
    assignedDept?: string;
    managerId?: string;
}

Here's my Stuff object which will be passed around my Angular applications.

export class Stuff {
    data: StuffDto;
    _manager: Stuff;

    get manager(): Stuff {
        return this._manager;
    }

    set manager(manager: Stuff) {
        this._manager = manager;
        this.data.managerId = manager.data.id;
    }
}

This will work in some straightforward scenarios, But not all of them.

If I create Peter and Tom, then set Peter to be Tom's manager. Here's what the 2 StuffDto objects look like.

{ id: abc01,
  name: 'Peter',
  assignedDept: 'Marketing Dept',
  managerId: null }
{ id: abc02,
  name: 'Tom',
  assignedDept: 'Sales Dept',
  managerId: 'abc01' }

If I change Peter's id from "abc01" to "abc01a", I would expect tom's ManagerId to be changed as well. Also if I change Peter's assignedDept form "Marketing Dept" to "R&D Dept", since there will not be "Sales Dept" underneath Peter's department for Tom to be assigned, Tom's assignedDept should be cleared to null.

I am not quite sure this could be done by subscription of RxJS. I've tried to make _manager a Subject and then subscribe to it. But the function will only be called whenever a new manager is assigned, not with the manager's property change.

I am wondering whether there's a way to do it without changing too much of the code. As the StuffDto will be passed to the server I won't be able to change that.

Answer 1

If I understood the question correctly, this @cartant's article could be what you are looking for.

The idea is to wrap your objects in a way that every property has its own observable and to use a proxy object for assignments.

I hope this fits your needs.