I am new to angular 8 and RxJs operators.
//state-management.component.ts @Component({ selector:
'app-state-management', templateUrl: './state-management.component.html' })
export class StateManagementComponent implements OnInit { stateManagement$
= this.dataservice.stateManagement$; constructor(private dataservice:
StateManagementService) { } ngOnInit(): void { } }
//state-management.service.ts @Injectable({ providedIn: 'root' }) export
class StateManagementService { // tslint:disable-next-line:variable-name
_state = { loading: 'Test loading', translationGroups: ['english', 'French'],
}; private store = new BehaviorSubject<any>(this._state); private state$ =
this.store.asObservable(); translationGroups$ = this.state$.pipe( tap(res =>
console.log('translationGroups$', res)), map(x => x.translationGroups ||
[]), distinctUntilChanged() ); loading$ = this.state$.pipe( tap(res =>
console.log('loading$', res)), map(x => x.loading || ''),
distinctUntilChanged() ); allEmplyees$ = this.http.get<IEmployees[]>(
'../assets/employees') .pipe( tap(res => console.log('allEmplyees$', res)),
map((res) => res.map((data) => { return { id: data.id, name: 'Hello ' +
data.name, email: data.email, gender: data.gender, productid:
data.productid, productName: '', } as IEmployees; }) ) ); allProducts$ =
this.http.get<IProducts[]>('../assets/products').pipe( tap(ev => console
.log('allProducts$', ev)) ); stateManagement$ = combineLatest([
this.allEmplyees$,
this.allProducts$, this.loading$, this.translationGroups$ ]).pipe( tap(res
=> console.log('stateManagement$', res)), map(([allEmplyees, allProducts,
loading, translationGroups]) => ({ allEmplyees, allProducts, loading,
translationGroups })) ); constructor(private http: HttpClient) { } private
updateState(state: any) { this.store.next((this._state = state)); console
.log('updateState', this._state); } public changeLoading(text: string) {
this.updateState({ ...this._state, loading: text }); } }
//HTML
<ng-container *ngIf="(stateManagement$ | async) || {} as vm"> <p>vm All
Emplyees!</p> <ul> <li *ngFor="let employee of vm.allEmplyees"> {{
employee.name }} -- {{ employee.email }} </li> </ul> <div>vm loading =
{{vm.loading}}<br /><br /></div> <div>vm translationGroups</div> <ul> <li *
ngFor="let translationGroup of vm.translationGroups"> {{ translationGroup
}} </li> </ul> <p>vm All Products!</p> <ul> <li *ngFor="let product of
vm.allProducts"> {{ product.name }} -- {{ product.desc }} </li> </ul> <
button (click)="changeLoading();">Change Loading</button> </ng-container>
I need to understand why combineLatest executed in my example here when
none of my observables in combineLatest emitted any value. I can see
stateManagement$ executed in console.
I know combineLatest *will not emit an initial value until each observable
emits at least one value but how come combineLatest executed in my example
here.*
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/angular/9c178a8f-39d6-4c56-9cf6-1b099bca67ddn%40googlegroups.com.
