InfiniteScroll Usage for one of my Projects

[joesan]

This is some awesome piece of code and I would like to use it in one of my projects, but however I face some issues when integrating it. What I want is the following:

1. User has a form where he can enter his search criteria. When he clicks submit, I make a REST API call to fetch the results. The results are transformed into my model class.

2. By default I only fetch 10 items on every REST API call. So for the first time the user loads these 10 items by clicking the Search button

3. From next time onwards, I should be able to just scroll down which will in turn load 10 more items from the REST API

I tried to use your scroll directive and I'm stuck with one issue which is in my Typescript which is as below:

import { Component, OnInit } from '@angular/core';

import { PowerPlantService, UserService } from '../shared';
import { User } from '../shared/models/user.model';
import { PowerPlant } from '../shared/models/powerplant.model';
import {PowerPlantSearchParams} from '../shared/models/powerplantsearchparams.model';

@Component({
  selector: 'app-home-page',
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
  // Represents the PowerPlantTypes
  powerPlantTypes = ['RampUpType', 'OnOffType'];
  // Represents the status of a PowerPlant
  powerPlantStatuses = ['Active & Disabled', 'Active', 'Disabled'];
  // Represents the search form
  model: any = {};
  // represents the list of PowerPlant data
  powerPlants: PowerPlant[];
  scrollCallback;

  currentPage = 1;

  constructor(private powerPlantService: PowerPlantService) {
    // this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
    // Set the initial values for the drop down fields in the UI
    this.resetForm();
  }

  ngOnInit() {}

  resetForm() {
    this.model.powerPlantOrg = '';
    this.model.powerPlantName = '';
    this.model.powerPlantType = '';
    this.model.powerPlantStatus = '';
  }

  searchPowerPlants() {
    const powerPlantSearchParams = new PowerPlantSearchParams(
      this.model.powerPlantType,
      this.model.powerPlantOrg,
      this.model.powerPlantName,
      this.model.powerPlantStatus);
/*
    this.powerPlantService.searchPowerPlants(powerPlantSearchParams).subscribe(result => {
      this.powerPlants = <PowerPlant[]> result;
    }); */
    this.scrollCallback = this.searchPowerPlants().bind(this);

    return this.powerPlantService.searchPowerPlants(powerPlantSearchParams, this.currentPage)
      .do(this.processData);
  }

  private processData = (newPowerPlants) => {
    this.currentPage++;
    this.powerPlants = this.powerPlants.concat(newPowerPlants.json());
  }

  allPowerPlants(onlyActive: boolean = false, page: number = 1): void {
    this.powerPlantService.allPowerPlants(onlyActive, page).subscribe(result => {
      this.powerPlants = <PowerPlant[]> result;
    });
  }
}

In the code above line number 50

this.scrollCallback = this.searchPowerPlants().bind(this);

does not compile! It complains that property bind does not exist on type Observable

Any thoughts on how to get this going? Or Do you have any alternative approach that I could try?

[ashwin-sureshkumar]

Hi @joesan, Thanks for getting in touch and appreciation.

You are calling the function while binding, that's the issue.

it should be

this.searchPowerPlants.bind(this)

Also, you should set the scrollCallback at declaration.

Right now you are reassigning everytime searchPowerPlants is called

Let me know..

[joesan]

I figured how by working through the errors that I got and I exactly did what you have posted. You can see my example here:

https://github.com/joesan/plant-simulator-ui/blob/master/src/app/home/home.component.ts

I have one other question though. In my home.html screen, I have a Search button. When I load this page, I call the searchPowerPlants(), bind the method for scrolling. But later on when the user enters a search criteria, I would like to clear the existing results, present the new results and any subsequent scrolling should satisfy this new search criteria.

Have you got any ideas as to how I could do this?

[ashwin-sureshkumar]

@joesan Sorry couldn't get back to you sooner, I was away.

Do you have a plunker/stackblitz available for this scenario, so I can test it out ?

[joesan]

Do you know if it is easy to import the whole GitHub project into plunker or stackblitz? If not, it is going to be harder for me to set up the whole project! Would it be possible for you to clone it and try it locally? You just need this project and it does not have any other dependency!

[ashwin-sureshkumar]

I am extremely sorry. somehow I missed this notification.

Hope the implementation went okay.