Managing a set of Components involves changing their properties using a Service. The Components have a minimal model and are meant to remain compact. They are being rendered with *ngFor.
The Service possesses a large Object and should possess the ability to access and modify the properties of all components.
I've explored BehaviorSubjects to some extent, but I find it off-putting that a small component would be listening to a large object:
class Service{
_bigModel: BehaviorSubject<object>
bigObject: Observable<object>
}
class Component{
constructor(){
bigObject.subscribe((newBigObject)=>{
let partNeeded = newBigObject.key1.keya.blabla;
//...do sth with partNeeded;
});
}
}
The drawbacks here:
Components will subscribe events that do not pertain directly to them.
Potentially loads the service's model into every small component, resulting in DOM bloat. Unclear if the BehaviorSubject is managing variable references properly.
- The requirement for components to understand the service's model to function correctly.
A more logical approach, in my opinion, would be for the Service to manipulate Components directly:
class Service{
componentList: Component[]; //unknown type of a Component
changeComponent(idOfComponent, propertyToChange, value);
changeAllComponents(propertyToChange){
for(c of componentList){
let val = computeSomeValue();
changeComponent(c, propertyToChange, val);
}
};
}
class Component {
someProperty: someType;
someOtherProperty: someType;
}
//Template:
<div [ngClass]="someOtherProperty">{{someProperty}}</div>
Is this approach viable and feasible? If so, how can I manipulate a specific Component from a service? If not, what are better alternatives?