Leveraging information sourced from Observable Angular 2

Question

Leveraging information sourced from Observable Angular 2

Let me start by expressing my gratitude towards the community for always being supportive of learners like myself as we dive into new technologies. I have been delving into Angular lately, and there is a specific aspect that still puzzles me, one that doesn't seem to have been addressed elsewhere.

Let's say I have a service that provides an Observable containing the necessary data - how can I ensure optimal performance when utilizing this data?

I am aware that I can utilize the async pipe to avoid the need for subscribing and unsubscribing, but this approach only works within the template. What if I also require access to the same data within the component itself? Wouldn't subscribing again (both in the template using the async pipe and in the component using .subscribe()) cause redundancy?
How can I maintain the freshness of the observable? For instance, suppose I have a table displaying content from an API. If I switch to the 2nd page of results (pagination), I would like to trigger another API call to update the observable accordingly.

If these questions sound familiar, I apologize, as I was unable to locate similar inquiries on Stackoverflow. Thank you for your time and consideration!

javascript angular typescript frontend

Answer 1

Answer №1

If you want the component to access the data, you can simply subscribe to it. HOWEVER, it may be advisable not to do so (explained below)...
This is where you utilize operators, combining observables to create a customized data flow:

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

ngOnInit() {
    let initialFetch = this.fooService.getData().share()
    this.foo$ = Observable.merge(
      initialFetch, // requires initial data
      initialFetch.flatMap(foos => { 
        this.randomClickEvent.switchMap(() => { //listening for click events
          return this.fooService.getMore().map((moreFoos: Foo[]) => { //loading additional 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>

Many people rely on simple operators like map(),do(), and manage subscriptions imperatively. However, it's generally recommended to avoid subscribing in order to prevent numerous side effects and forgetting to unsubscribe. In most cases, you can achieve your objectives without subscribing.

Observables are designed to depict a data flow, sticking to the functional programming paradigm - focusing on defining "what" rather than "how". In this context, this.foo$ encapsulates both the initial fooService.getData() call and any subsequent fooService.fetchMore() operations.

Answer 2

If you want the component to access the data, you can simply subscribe to it. HOWEVER, it may be advisable not to do so (explained below)...
This is where you utilize operators, combining observables to create a customized data flow:

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

ngOnInit() {
    let initialFetch = this.fooService.getData().share()
    this.foo$ = Observable.merge(
      initialFetch, // requires initial data
      initialFetch.flatMap(foos => { 
        this.randomClickEvent.switchMap(() => { //listening for click events
          return this.fooService.getMore().map((moreFoos: Foo[]) => { //loading additional 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>

Many people rely on simple operators like map(),do(), and manage subscriptions imperatively. However, it's generally recommended to avoid subscribing in order to prevent numerous side effects and forgetting to unsubscribe. In most cases, you can achieve your objectives without subscribing.

Observables are designed to depict a data flow, sticking to the functional programming paradigm - focusing on defining "what" rather than "how". In this context, this.foo$ encapsulates both the initial fooService.getData() call and any subsequent fooService.fetchMore() operations.

Leveraging information sourced from Observable Angular 2

Answer №1

Similar questions

I'm having trouble inputting text into my applications using React.js and TypeScript

Send a list of integers created in a JavaScript function from a Razor view to a controller

Reverse the text alteration when the user leaves the field without confirming

Having constant problems with ngModel twoway binding. Any suggestions on how to successfully bind to a property in order to update an api link?

All of the jstree add-ons are not working as expected

Working with HTML5 canvas to draw multiple images

Improvement in Select2 Change Event: Update the subsequent select2 box options based on the value change in the preceding select2 box

Struggling to modify a JSON value within a loop

Issue encountered while implementing async functionality in AngularFireObject

What could be causing the TypeScript type error within this Effector effect subscriber?

Add a data attribute to an HTML element within JSX without assigning any value

Choose all or none of the items from the list with a single click - v-list-item-group

Transfer data from an HTML form -> call the ajax load() function

Tips for Successfully Transmitting Information via Mat-Dialog

No declaration file was located for the module '@handsontable/react' despite the presence of a 'd.ts' file

What steps should I take to address the issue of chart_js.Chart.register in my implementation of chart.js

Having trouble importing .task files in a Next.js project with TypeScript?

Tips for applying a jQuery class when the page is both scrolled and clicked

What is the best way to establish a shared file for a constant that can be utilized by both JavaScript and C/C++

Is it possible for the like button to display specific information when clicked?