Check for nextPage to not function if at end of dataset - node.js

Question

I have a pagination system that allows me to go to the next page and previous page.
I want to be able to implement that if the user runs out of data to return on the page then they should be redirected back to the first page again.
Can someone help me do this? thanks
You can see below my .ts file and .html file.
import { Component } from '#angular/core';
import { WebService } from './web.service';
import { AuthService } from './auth.service';
#Component({
selector: 'hotels',
templateUrl: './hotels.component.html',
styleUrls: ['./hotels.component.css']
})
export class HotelsComponent {
constructor(private webService: WebService, private authService:
AuthService) {}
ngOnInit() {
if (sessionStorage.start) {
this.start = sessionStorage.start;
}
this.webService.getHotels(this.start);
}
nextPage() {
this.start = Number(this.start) + 5;
sessionStorage.start = Number(this.start);
this.webService.getHotels(this.start);
}
previousPage() {
if (this.start > 0) {
this.start = Number(this.start) - 5;
sessionStorage.start = Number(this.start);
this.webService.getHotels(this.start);
}
}
hotel_list;
start = 0;
}
HTML
<div class="container" style="margin-top:100px;">
<div class="row">
<div class="col-sm-12">
<div *ngFor="let hotel of webService.hotel_list | async">
<div class="card text-white bg-primary mb-3"
[routerLink]="['/hotels', hotel._id]" style="cursor: pointer">
<div class="card-header">
{{ hotel.Name }}
</div>
<div class="card-body">
This hotel is based in
{{ hotel.Location }}
</div>
<div class="card-footer">
{{ hotel.review_count }}
reviews available
</div>
</div>
</div>
</div> <!-- col -->
</div> <!-- row -->
<div class="row">
<div class="col-sm-6">
<button (click)="previousPage()">Previous</button>
</div>
<div class="col-sm-6 text-right">
<button (click)="nextPage()">Next</button>
</div>
</div>
</div> <!-- container -->
Web Service
import { Http, URLSearchParams } from '#angular/http';
import { Injectable } from '#angular/core';
import 'rxjs/add/operator/toPromise';
import { Subject } from 'rxjs/Rx';
#Injectable()
export class WebService {
hotelID;
private hotels_private_list = [];
private hotelsSubject = new Subject();
hotel_list = this.hotelsSubject.asObservable();
private hotel_private_list = [];
private hotelSubject = new Subject();
hotel = this.hotelSubject.asObservable();
private reviews_private_list = [];
private reviewsSubject = new Subject();
reviews = this.reviewsSubject.asObservable();
url: string = 'http://localhost:3000/api/hotels/';
hotelsArray = [];
constructor(private http: Http) {
}
getHotels(start) {
return this.http.get(
'http://localhost:3000/api/hotels?start=' + start)
.subscribe(response => {
this.hotels_private_list = response.json();
this.hotelsSubject.next(this.hotels_private_list);
})
}
getHotel(id: string) {
return this.http.get(
'http://localhost:3000/api/hotels/' + id)
.subscribe(response => {
this.hotel_private_list = [];
this.hotel_private_list.push(response.json());
this.hotelSubject.next(this.hotel_private_list);
this.hotelID = id;
})
}
getReviews(id) {
this.http.get(
'http://localhost:3000/api/hotels/' + id + '/reviews')
.subscribe(
response => {
this.reviews_private_list = response.json();
this.reviewsSubject.next(
this.reviews_private_list);
}
)
}
postReview(review) {
let urlSearchParams = new URLSearchParams();
urlSearchParams.append('username', review.name);
urlSearchParams.append('text', review.review);
urlSearchParams.append('stars', review.stars);
this.http.post(
"http://localhost:3000/api/hotels/" +
review.hotelID + "/reviews",
urlSearchParams)
.subscribe(
response => {
this.getReviews(review.hotelID);
}
)
}
}

Answer 1

I have changed a few things. no need to call API for every next/prev if already exists use that. no need to write async in HTML.
SERVICE
getHotels(start) {
return this.http.get('http://localhost:3000/api/hotels?start=' + start);
}
HTML
<div *ngFor="let hotel of pages[start]">
COMPONENT
pages = {};
ngOnInit() {this.getdata(this.start)}
getdata(start) {
if (pages[start]) return; //don't do anything
this.pages[start] = [];
this.webService.getHotels(start).subscribe(response => {
const result = response.json();
if(!result){ // data does not exist go to first page
this.start = 0;
}else{
pages[start] = result;
}
})
}
nextPage() {
this.start = this.start + 5;
sessionStorage.start = this.start;
getdata(this.start);
}
previousPage() {
if (this.start > 0) {
this.start = this.start - 5;
sessionStorage.start = this.start;
getdata(this.start);
}
}