Propagating DOM changes "back into an observable value" | Angular Community | Page 1

#

Theres a lot going on here, but my issue is (at least to me) rather essential. The component has an array of fields, wrapped in a BehaviorSubject fields$. I'm going to omit the specific implementation, but the interface for Field looks like this:

export default interface Field {
  value: string
  state: FieldState,
  correctAnswer : boolean
  state$ : Observable<FieldState>
}

Its essentially a plain old object, with the exception of the state$ attribute which is an observable that holds an enum of typeFieldState:

export enum FieldState{
  NONE,
  EVALUATING,
  TRUE,
  FALSE
}

#

In the template, the fields$ BehaviorSubject is bound via ngFor to a div with a specific class. Whenever the user clicks on the div, the associated (click) handler will set the fields state, based on its current state, to a new state, i.e. a really crude state transition implementation.

#

This will make the state$ observable in instances of Field emit (happens via a setter) and I use this behavior to change some CSS animations in my GUI (i.e. mark the field as correct, false, or loading etc)

#

MY ISSUE is the following:

#

in ngAfterViewInit you can see this massive unreadable pile of rxjs operators. I'm trying to set up a way to detect if all fields have been marked by the user (i.e. have been clicked and their state set), so i can generate a new field array, once the current one is completely marked

#

As i'm typing this, i realize i can solve this by just subscribing to all the observables from the Field instances in the fields$ array, but I was wondering if it was possible to figure out if all fields states have changed, by somehow feeding back a gui interaction from the template to the fields$ BehaviorSubject

#

i.e.

#

have the fields$ behavior subject emit, when there is a state change, initiated from the DOM

#

because right now, when a field div is clicked in the DOM, it obviously changes just this one instace of the field, which is unrelated to the array - even though the fields$ array holds the instance

#

i.e. somehow a deep triggering of the holding behavior subject? am i making sense?

#Propagating DOM changes "back into an observable value"