Implement Infinite Scrolling Using Angular 8

install and save

npm install ngx-infinite-scroll --save

To implement infinite scroll, let's first design our user interface, for that open app.component.html and paste the below code.

1. <mat-toolbar color="accent">  
2.   <span>Manav Pandya - C#Corner</span>  
3.   <span class="demo-toolbar"></span>  
4. </mat-toolbar>  
5.   
6. <mat-card>  
7.   <div class="container">  
8.     <div class="row" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="false"  
9.     style="height: 400px; overflow-y: scroll;">  
10.       <div *ngFor="let item of myPhotosList" class="col-md-4" style="margin-top: 10px;">  
11.         <img style="height: 220px;width: 315px;" src="{{item.url}}" />  
12.       </div>  
13.     </div>  
14.   </div>  
15. </mat-card>  

Here I have used the two material components to hold images data into card-component and a toolbar which contains the title of my single page application, additionally i have used division tag to hold list of images to render inside card-component.

 

For that i have provided few properties to an element to work with scrolling.

• infiniteScroll
  It is the primary property that defines the content is being scrolled.

• infiniteScrollDistanceUsed to provide distance where we will reach up to the defined percentage of the element, at that time scroll event will be triggered.

• infiniteScrollThrottleNumber of milliseconds after the scroll event will be triggered.

• scrolledIt is a method to perform a specific action when scroll is being reached.

• scrollWindowWe should decide that we want to listen to window scroll event or the element scroll event, here in this demo I have used false because I'm using element to be scrolled.

Open app.component.ts and paste the below code into it.

1. import { Component, OnInit } from '@angular/core';  
2. import { MydataserviceService } from './mydataservice.service';  
3. import { Photos, PhotosObj } from './_modal';  
4.   
5. @Component({  
6.   selector: 'app-root',  
7.   templateUrl: './app.component.html',  
8.   styleUrls: ['./app.component.css'],  
9.   providers: [MydataserviceService]  
10. })  
11. export class AppComponent implements OnInit {  
12.   
13.   title = 'app';  
14.   myPhotosList: Photos[] = [];  
15.   page: number = 1;  
16.   
17.   constructor(private service: MydataserviceService) { }  
18.   
19.   ngOnInit() {  
20.     // To call api for initial image rendering  
21.     this.getPhotos();  
22.   }  
23.   
24.   // To get image data from api  
25.   getPhotos() {  
26.     console.log(this.page);  
27.     this.service.getMyPhotos(this.page).subscribe((res) => this.onSuccess(res));  
28.   }  
29.   
30.   // When we got data on a success  
31.   onSuccess(res) {  
32.     console.log(res);  
33.     if (res != undefined) {  
34.       res.forEach(item => {  
35.         this.myPhotosList.push(new PhotosObj(item));  
36.       });  
37.     }  
38.   }  
39.   
40.   // When scroll down the screen  
41.   onScroll()  
42.   {  
43.     console.log("Scrolled");  
44.     this.page = this.page + 1;  
45.     this.getPhotos();  
46.   }  
47.   
48. }  

As you can see in my component code I have created several methods, and the primary method is onScroll().