Issue
I have the following initialization at the top of my angular component.
public myDataObservable$: Observable<MyData[]>;
Somewhere in my component I make the following call to an Ngrx store using a selector to get back data for the observable. All of this works fine and I get the data back I wanted.
this.myDataObservable$ = this.store.pipe(select(MyDataStore.getMyData));
I need to know when this observable completes. I need to set a boolean that will turn off a loading indicator when all of the data the observable is trying to get finishes. This is done through a web service.
Because the source of the observable comes from somewhere else I cannot hang a ‘complete’ call back () => {this.loadingIndicator = false} like this.
I have tried various Rxjs operators such as TakeUntil and Finalize with no luck. These operators get called right away and my loading indicator shuts off as fast as it went up.
I scoured the internet and tried many different solutions but I cannot find an answer. Thanks for taking the time to look at this.
Solution
The solution was to place the boolean for the loading indicator in the state and set it within the reducer. When the Data is populating the loading reducer is called and the state boolean is set to true. When the loading success reducer is called it will the the state boolean to false.
After that I created a selector to get the boolean state.
I now initialize this as an Observable boolean and within my ngOnInit method I can declare the following,
this.showLoading$ = this.store.pipe(select(TechnopediaStore.getisLoadingData));
With that I just have to apply this to the structure directive in my .html and it works perfectly.