CODEWITHSUNDEEP
javascriptangulartypescriptfrontend
anacampesan
anacampesan

Reputation: 105

Using data from Observable Angular 2

First, I'd like to thank the community for all the support learners like me get while working with new technologies. I've been using Angular for a while now, and there's something I still don't quite understand nor have I seen asked elsewhere.

Supposing I have a service that returns an Observable with the data I need, how should I use this data properly, in terms of performance?

  1. I know I can use the async pipe and avoid having to sub/unsub, but this only happens in the template. What if I needed to use the same data in the component as well? Wouldn't subscribing again (from the template with the async pipe and from the component with .subscribe())?

  2. How do I keep the observable up to date? For example, I have a table displaying data from an API. If I click on the 2nd page (pagination), I'd like to make another call and have the observable updated.

I'm sorry if this has been asked before, I personally couldn't find if on Stackoverflow. Thanks for your attention!

Upvotes: 1

Views: 169

Answers (1)

n00dl3
n00dl3

Reputation: 21564

  1. If you need the data in the component as well, you can just subscribe to it. BUT maybe you should not (see below)...

  2. it's there that you use the operators, you can combine observables to define a custom data flow:

foo$: Observable < Foo[] > ;
randomClickEvent = new Subject < clickEvent > ();

ngOnInit() {
    let initialFetch = this.fooService.getData().share()
    this.foo$ = Observable.merge(
      initialFetch, // need the initial data
      initialFetch.flatMap(foos => { 
        this.randomClickEvent.switchMap(() => { //listen to click events
          return this.fooService.getMore().map((moreFoos: Foo[]) => { //load more foos
            return foos.concat(...moreFoos) //initial foos values + new ones
          })
        })
      })
    );
  }

<span *ngFor="let foo of (foo$|async)">{{foo.name}}</span>
<button (click)="randomClickEvent.next($event)">Load More foos !</button>

Most of people just use simple operators like map(),do(), etc and manage their subscription imperatively, but it is usually better to not subscribe, so you avoid many side effects and some "Ooops I forgot to unsubscribe here". usually you can do everything you need without subscribing.

Observables exist to describe a data flow, nothing more, nothing less. It's a paradigm of functional programming: you don't define how things are done, but what they are. Here, this.foo$ is a combination of the initial fooService.getData() and every fooService.fetchMore() that may occur.

Upvotes: 1

Related Questions