Implementation Of Ngx Infinite Scroller Using Angular Application

Introduction

In this article, we will integrate an infinite scroller. In this example when we scroll down, only a few items will show on the screen. After scrolling to the bottom, it will load the next data and it will be attached to the screen. To implement this, we need to install the Ngx-infinite scroller package from the node package manager.

For this example I am using the Google Pixel photo search API, which I have already implemented the search example which I am using in this example just to show how infinite scroller works, you can find its link here.

Prerequisites

Basic knowledge of Angular
Visual Studio Code must be installed
Angular CLI must be installed
Node JS must be installed

Create an Angular project

Step 1

Create a new Angular project using the following NPM command:

ng new infiniteScrollerExample

Step 2

Open the newly-created project in Visual Studio code and install ngx-infinite-scroll using the below command:

npm install ngx-infinite-scroll

Step 3

Now, let's create a new component, by using the following command.

ng g c infinite-scroller

Step 4

Now open infinite-scroller.component.html file and add the following code:

<h1 align='center' >Infinite scroller Example</h1>
<div class="search-results"
infinite-scroll
[infiniteScrollDistance]="scrollDistance"
[infiniteScrollUpDistance]="scrollUpDistance"
[infiniteScrollThrottle]="throttle"
(scrolled)="onScrollDown()">
<div class="container">
<div class="row">
<div *ngFor="let pic of array;let i=index" class="col-sm-4">
<div style="margin-top: 10px;" class="card">
<img class="card-img-top" [src]="pic.src.landscape" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">{{i+1}}</h5>
<a href="#" class="btn btn-primary">Know more</a>
</div>
</div>
</div>
</div>
</div>
</div>

Step 6

The next step is to open infinite-scroller.component.ts file and add the following code:

import { Component, OnInit } from '@angular/core';
import { PexelPhotoSearchService } from '../pexel-photo-search.service';
@Component({
selector: 'app-infinite-scroller',
templateUrl: './infinite-scroller.component.html',
styleUrls: ['./infinite-scroller.component.css']
})
export class InfiniteScrollerComponent implements OnInit {
array = [];
sum = 10;
throttle = 300;
scrollDistance = 1;
scrollUpDistance = 2;
direction = "";
modalOpen = false;
photos: any;
start: number = 0;
constructor(private pexelPhotoSearchService: PexelPhotoSearchService) {
}
ngOnInit() {
this.getPhoto();
}
getPhoto() {
this.pexelPhotoSearchService.getdata('bikes', this.sum).subscribe((response: any) => {
this.photos = response.photos;
this.addItems(this.start, this.sum);
}, (error) => {
console.log(error);
})
}
selector: string = '.main-panel';
addItems(index, sum) {
for (let i = index; i < sum; ++i) {
debugger
this.array.push(this.photos[i]);
console.log(this.array);
}
}
onScrollDown(ev) {
// add another 20 items
this.start = this.sum;
this.sum += 20;
this.getPhoto();
this.direction = "down";
}
}

In the above image of the scroll down method, first, it will show only 20 records. After we scroll down, it will add 20 records in the sum variable, and the start variable will be the sum.

Step 7

Here, we need to add one file inside assets folder which includes the coordinates of our polygon to mark it using latitude and longitude inside Google Maps.

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable,throwError } from 'rxjs';
import {catchError} from 'rxjs/operators';
const httpOptions={
headers : new HttpHeaders({
'Authorization':'563492ad6f917000010000014060d806c66c47b88b9b4d7f8c487692'
})
}
@Injectable({
providedIn: 'root'
})
export class PexelPhotoSearchService {
constructor(private http:HttpClient) { }
getdata(search,perPage):Observable<any>{
const url="https://api.pexels.com/v1/search?query="+search+"&per_page="+perPage;
return this.http.get<any>(url,httpOptions).pipe(catchError(this.handelError));
}
handelError(error){
return throwError(error.message || "Server Error");
}
}

Step 8

Here, we need to add one file inside assets folder which includes the coordinates of our polygon to mark it using latitude and longitude inside Google Maps.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { InfiniteScrollerComponent } from './infinite-scroller/infinite-scroller.component';
import { HttpClientModule } from '@angular/common/http';
import { OnlyNumberComponent } from './only-number/only-number.component';
declare const chance;
@NgModule({
imports: [BrowserModule, FormsModule, InfiniteScrollModule, HttpClientModule],
declarations: [AppComponent, InfiniteScrollerComponent, OnlyNumberComponent],
bootstrap: [AppComponent]
})
export class AppModule { }

Output

Conclusion

In this article, we learned how to create an infinite scroller that will boost and improve our application performance.

I hope you have enjoyed this article as much as I have enjoyed writing and coding the examples.

Please let me know how to improve it.

2 Comments

Join the conversation! Your thoughts help the community grow.

Marwan Yadri5y ago
Does it save the page state so when you go backward it scrolls you to where you left ?
- Siddharth Gajbhiye5y ago
  Hey Marwan,, I did not check for this one but we can still achieve what you said we need to take coordinates of x and y and when you retrun the page again you can use that same coordinates with your search category