Angular - How to combine multiple "valueChanges" observables into one
If want to use single Data observable pattern and combine multiple observables into one observable, then combineLatest may come as useful.
PesudoCode
userNameAndEmail$=this.userNameAndEmail().pipe(startsWith(null));
userAddressDetail$=this.userAddressDetails().pipe(startsWith(null));
userMiscDetails$=this.userMiscDtls();
completeUserData$=combineLatest([userNameAndEmail$,userAddressDetail$,userMiscDetails$])
.pipe(map(([userNameAndEmail,userAddressDetail,userMiscDetails])=>{
return {userNameAndEmail,userAddressDetail,userMiscDetails}; } ));
However, there are certain conditions. https://www.learnrxjs.io/learn-rxjs/operators/combination/combinelatest
You have a few choices depending on what output you expect. You may want to read this article:
- Learn to combine RxJs sequences with super intuitive interactive diagrams
If you just want to get notified whenever any of the value changes use merge
:
import {merge} from "rxjs/observable/merge";
merge(
this.form.get("type").valueChanges,
this.form.get("departure").valueChanges,
this.form.get("destination").valueChanges
this.form.get("stations").valueChanges
).subscribe(() => this.calcFinalTransports());