Angular-Listening to store changes & emit a value from a Service component to a different component - only after Service completes certain operations

Question

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 ......
  
}

score 0 · Accepted Answer · answered Feb 09 '22 at 13:09

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;
    });
  }
}

Hi Amer, first of all, thank you for your answer. So now MainComponent will keep on listening to the event of store change in GetDataAsyncService-getData(). As soon as it is triggered (change in store), MainComponent will listen to the value and perform the operation. — developerabab, Feb 09 '22 at 16:44

Angular-Listening to store changes & emit a value from a Service component to a different component - only after Service completes certain operations

1 Answers1