I think I'm using BehaviorSubject subscriber incorrectly, can someone show me a better way to call data from my API in Angular2?

Question

I have a couple of navigation buttons in an Angular app. What I'm trying to do is remove "Prev" on the first page and "Next" on the last page.

All I want to do is set two booleans that say whether it's the first or last page.

Trouble is I haven't managed to get my head around these subscribers and behaviours.

I can create a function that calculates the last page from totalItems and itemsPerPage so please don't worry about that, I just have no idea how to call a function from this subscribe.

If someone can please show me how to write a callback or whatever else is needed to do this I will be eternally grateful.

Component.html:

<div class="pagination-panel clearfix">
    <button (click)="previousPage()" *ngIf="firstPage != true">Prev</button>
    <button (click)="nextPage()" *ngIf="lastPage != true">Next</button>
</div>

<!-- How the data is used, if that helps  -->
<h2 class="spray-header">Presenters</h2>
<article *ngFor="let presenter of (presenters$ | async)?.data" class="presenter-item">
    <div class="presenters-header">
        <h3 class="presenters-title margin-none">
            <a [routerLink]="['/presenters', presenter.id]">{{presenter.name | uppercase}}</a>
        </h3>
        <p class="presenters-details">{{presenter.details}}</p>
    </div>
    <img src="{{presenter.small_thumb}}" class="presenters-profile-picture profile-picture">
</article>

Component.ts

import {Component, OnInit, Inject} from '@angular/core';
import {Http} from "@angular/http";
import "rxjs/add/operator/map";
import {BehaviorSubject} from "rxjs/BehaviorSubject";
import {ActivatedRoute, Router} from "@angular/router";

export class PresentersComponent implements OnInit {
    firstPage = true;
    lastPage = false;
    presenters$ = new BehaviorSubject([
        {
            data: {
                id: 0,
                name: "Loading...",
                details: "Loading...",
                small_thumb: "",
                radio_shows: []
            },
            currentPage: 1,
            itemsPerPage: 0,
            totalItems: 0
        }
    ]);

    constructor(@Inject('api') private api,
                private colorService: ColorService,
                private http: Http,
                private route: ActivatedRoute,
                private router: Router) {
        route.params
            .map((p: any) => p.page)
            .switchMap(page => http.get(api + '/presenters?page=' + page))
            .map(res => res.json())
            .subscribe(this.presenters$);
    }
}

Update 1

Could something like this work?

console.log(x); seems to give me back the right data, but now none of my (presenters$ | async)?.data stuff is working.

        .subscribe(
            function (x) {
                console.log(x);
                this.presenters$ = x;
            },
            null,
            function () {
                console.log("set the values here");
            }
        );

Update 2

The above breaks because this refers to the function call (duh!), but I get errors when attempting to use the fat arrow, anyone know what I'm doing wrong here?

.subscribe(
    x => this.presenters$ = x,
    null,
    function () {
        console.log("set the values here");
   }
);

The above doesn't throw and error but still the async is not working.

The below throws this error: "Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'"

.subscribe(res => {
    this.presenters$ = res;
    // Any other lines here.
});

According to the link below it looks like I just need to remove the async pipe, will give it a shot later. Angular 4: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

Update 3

By removing the async pipe from the data call in the template (presenters$ | async)?.data" I got over the error in the last update and managed to get the functionality I'm after working in the dev environment.

// component.html change
(presenters$)?.data

// latest subscribe that I have working, sort of
.subscribe(res => {
    this.presenters$ = res
    // got extras lines of code working here
});

The problem now is that won't compile for production. When I try to compile I get this error:

ERROR in ng:///var/www/html/io->radio/src/app/presenters/views/presenters.component.html (2,1): Property >'data' does not exist on type 'BehaviorSubject<{ data: { id: number; >name: string; details: string; small_thumb: string; radio_s...'.

Update 4

I'm beginning to think that I'm being a total spaz here, and that BehaviorSubject is not what I ought to use. All I'm trying to do is call data from my API and map it to an object, if someone can tell me what I'm doing wrong here it would be a great help.

I think that my issues are due to inappropriate usage of the BehaviorSubject and a lack of understanding of the async pipe.

My next step is to try out the very sensible suggestion from @DeborrahK and create a service for retrieving the data.

Answer 1

The trick is to add the curly braces around multiple lines of code. I have an example below.

.subscribe(res => {
                this.presenters$ = res;
                // Any other lines here.
            });

But you may want to consider something like this instead:

ngOnInit(): void {
    this.route.params.subscribe(
       params => {
            const id = +params['id'];
            this.getMovie(id);
            // I could have more lines of code here.
        }
    );
}

This bit of code is executed when the component is initialized. It watches for changes to your parameters and gets different data as the parameters change. You can dramatically simplify the above code if the parameters don't change.

getMovie(id: number): void {
    this.movieService.getMovie(id)
        .subscribe(
              movie => {
                this.onMovieRetrieved(movie);
                // I could have more lines of code here
              },
              error => {
                 this.errorMessage = <any>error;
                 // I could have more lines of code here
              }
         );
}

This code calls a service to retrieve the data. The subscribe() is here. The http.get is within the service.

This uses movies instead of the data you have, but the concepts and structure would be the same.

I have a complete example here: https://github.com/DeborahK/MovieHunter