I'm currently working on creating a custom component that can interact with an observable passed in through an input. The goal is to show/hide elements based on the state of the observable. Here's what I have in mind:
@Input() observable: Observable<any>;
ngOnInit() {
this.observable.onSubscribe(() => {
// display element, perform logic at the start;
});
this.observable.onCompleteOrNext(() => {
// hide element, execute logic at the end;
});
}
While exploring the rxjs documentation, I came across the possibility of using let like so:
this.observable.let((o: Observable) => {
// execute logic.
return o;
});
However, this approach feels like a workaround and I am unsure how to handle actions when the observable completes. I anticipate the observables to be asynchronous, such as HTTP requests, so the component needs to handle them accordingly.
In terms of handling completion, I initially thought about using do function:
this.observable.do(() => {
// execute logic upon observable completion.
// unfortunately, not triggering as expected.
});
Unfortunately, unless the `do` function is defined during observable creation, it doesn't get invoked. Although Angular2 allows direct binding of views to observables, I require the capability to perform actions based on the observable, rather than just showing/hiding elements.
My attempts at research haven't yielded satisfactory results, and the rxjs documentation isn't providing clear guidance. I believe this should be a straightforward task, but it seems like my approach might be flawed.