Here we have to classes GetDataAsyncService which waits for change in the store (and not executes the block of code under it until a change in the store ( this.getDataAsyncService.getAsyncData().subscribe((data)=>{ )}). When it is called from MainComponent it will get return of(propA); (from GetDataAsyncService) before the block of code in the listener is executed - because the listener is still waiting for a change in the store. I want to emit that observable only when that operation block is executed.
export class GetDataAsyncService {
propA;
constructor(private store: Store<AppState>)
getData():Observable<any>{
this.store.pipe(select(appState)).subscribe((val)=>{
// operation block
// some operations
// some more operations
this.propA = val.propA;
})
return of(propA); // this should be emitted with the latest value only when the block of code above executes - not before that
}
}
export MainComponent implenents OnInit{
propA: string = '';
constructor(private getDataAsyncService: GetDataAsyncService){}
ngOnInit(): void{
this.getDataAsyncService.getAsyncData().subscribe((data)=>{
this.propA = data.propA;
})
}
// any operation involving propA
// code ......
}
You can achieve that by returning the Observable itself from the getData function and mapping it to the required prop, instead of subscribe to it, like the following:
export class GetDataAsyncService {
propA;
constructor(private store: Store<AppState>) {}
getData(): Observable<any> {
return this.store.pipe(
select(appState),
map((val) => val.propA)
);
}
}
export class MainComponent implements OnInit {
propA: string = '';
constructor(private getDataAsyncService: GetDataAsyncService) {}
ngOnInit(): void {
this.getDataAsyncService.getAsyncData().subscribe((propA) => {
this.propA = propA;
});
}
}