NB: Consult the code and play with the app here: ⚡️
The example app allows FANS to vote for either Blue or Red. Notice when voting for either the results panel on top does show the updated score. At the bottom, both "FANS" areas show their respective mood with an emoji. If it's a tie both moods are neutral 😐. Otherwise, the winning team displays 😃 and the losing one 🤬. Click/Vote to see the results pannel update immediately. On the other hand, the "FANS" areas only updates if there is a "change of mood".
State (in: "./src/state.ts"): The app's state/data and the functions to read/query or write/mutate it. This file also contains the app's rules!
components (in: "./src/components/**"): Contains the two Angular components of our app ("Result Panel" and "Fan's Area")
Unlike other helpers/adapters such as adax-react and adax-vue that are simple one liners, adax-angular requires you to both manually subscribe and unsbscribe to/from the targeted queries! With adax-angular, components subscribtion to queries is done either from within ngOnInit for components without props or from within ngOnChanges for components with props. Unsubscribing with adax-angular is always done within ngOnDestroy.
ResultPanel, in "./src/components/ResultPanel.ts" is a component without props. Whereas FansGroup.ts "./src/components/FansGroup.ts" is a component with props!