I need to show 4 items per page in each scroll. right now I am initially showing 4 items but when the page is scrolled I am showing all of the rest of the items. how can I achieve only 4 items per scroll? I tried using slice but couldn't execute the concept. I am using angular and ngx infinite scroll package.
component
import {
Component, OnInit
} from '@angular/core';
import { APIService } from 'src/app/services/api.service';
@Component({
selector: 'app-categories',
templateUrl: './categories.component.html',
styleUrls: ['./categories.component.css']
})
export class CategoriesComponent implements OnInit {
isBottom = false
names = []
allProducts = []
categories: any = []
constructor(
private apiService: APIService
) { }
ngOnInit() {
this.getProductsData()
}
getProductsData() {
this.apiService.GetProductData()
.subscribe((response: any) => {
response.forEach((product: any, index: number) => {
if(index < 4) this.categories.push(product)
})
this.names = response.map((product: any) => product.title)
},
err => console.log(err))
}
onScroll() {
console.log('SCROLLED')
this.apiService.GetProductData()
.subscribe((response: any) => {
this.categories = response
this.isBottom = true
console.log(this.categories)
},
err => console.log(err))
}
}
template
<div class="container-fluid">
<div class="row min-vh-100">
<div class="col-12">
<header class="row">
<app-top-nav></app-top-nav>
<app-header [inputData]="names"></app-header>
</header>
</div>
<div class="col-12">
<main class="row">
<div class="col-12">
<div class="row">
<div class="col-12 py-3">
<div class="row">
<div class="col-12 text-center text-uppercase">
<h2>Computers</h2>
</div>
</div>
<div class="row">
<div *ngFor="let cat of categories" class="item" style="width:300px; float:left;">
<div>
<div>
<div>
<a href="product.html">
<img src="{{cat.image}}" alt="x" class="img-fluid">
</a>
</div>
<div class="col-12 mb-3">
<a href="product.html" class="product-name">{{cat.title}}</a>
</div>
<div class="col-12 mb-3">
<span class="product-price-old">
</span>
<br>
<span class="product-price">
</span>
</div>
<div class="col-12 mb-3 align-self-end">
<button class="btn btn-outline-dark" type="button"><i
class="fas fa-cart-plus me-2"></i>Add to cart</button>
</div>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<h4 *ngIf="isBottom" style="text-align: center; color: black;">That's it. thanks for reading</h4>
<div class="col-12 align-self-end">
<app-footer></app-footer>
</div>
</div>
</div>
<div class="search-results" infiniteScroll [infiniteScrollDistance]="2"
[infiniteScrollThrottle]="50" (scrolled)="onScroll()"></div>
CodePudding user response：
I would edit your code as following. You need to add page variable, and pass to backend both page and perPage values. So each time you scroll down to the end, onScroll function is adding 1 to page variable and loading next 4 products. You need also edit backend endpoint to support this functionality.
import {
Component, OnInit
} from '@angular/core';
import { APIService } from 'src/app/services/api.service';
@Component({
selector: 'app-categories',
templateUrl: './categories.component.html',
styleUrls: ['./categories.component.css']
})
export class CategoriesComponent implements OnInit {
isBottom = false
names = []
page = 1,
allProducts = []
categories: any = []
constructor(
private apiService: APIService
) { }
ngOnInit() {
this.getProductsData()
}
getProductsData() {
this.apiService.GetProductData({page: this.page, per_page: 4})
.subscribe((response: any) => {
response.forEach((product: any, index: number) => {
this.categories.push(product)
})
this.names = response.map((product: any) => product.title)
},
err => console.log(err))
}
onScroll() {
this.page ;
this.apiService.GetProductData({page: this.page, perPage: 4})
.subscribe((response: any) => {
response.forEach((product: any) => this.categories.push(product));
this.isBottom = true
},
err => console.log(err))
}
}
If you want to manage this on frontend
I will suggest it only if you have small amount of products, say not more than 100. You can get all products at first time, and then slice in template.
import {
Component, OnInit
} from '@angular/core';
import { APIService } from 'src/app/services/api.service';
@Component({
selector: 'app-categories',
templateUrl: './categories.component.html',
styleUrls: ['./categories.component.css']
})
export class CategoriesComponent implements OnInit {
isBottom = false
names = []
page = 1,
allProducts = []
categories: any = []
constructor(
private apiService: APIService
) { }
ngOnInit() {
this.getProductsData()
}
getProductsData() {
this.apiService.GetProductData()
.subscribe((response: any) => {
response.forEach((product: any, index: number) => {
this.categories.push(product)
})
this.names = response.map((product: any) => product.title)
},
err => console.log(err))
}
onScroll() {
this.page ;
}
<div class="container-fluid">
<div class="row min-vh-100">
<div class="col-12">
<header class="row">
<app-top-nav></app-top-nav>
<app-header [inputData]="names"></app-header>
</header>
</div>
<div class="col-12">
<main class="row">
<div class="col-12">
<div class="row">
<div class="col-12 py-3">
<div class="row">
<div class="col-12 text-center text-uppercase">
<h2>Computers</h2>
</div>
</div>
<div class="row">
<div *ngFor="let cat of categories.slice(page * 4 - 4, page * 4)" class="item" style="width:300px; float:left;">
<div>
<div>
<div>
<a href="product.html">
<img src="{{cat.image}}" alt="x" class="img-fluid">
</a>
</div>
<div class="col-12 mb-3">
<a href="product.html" class="product-name">{{cat.title}}</a>
</div>
<div class="col-12 mb-3">
<span class="product-price-old">
</span>
<br>
<span class="product-price">
</span>
</div>
<div class="col-12 mb-3 align-self-end">
<button class="btn btn-outline-dark" type="button"><i
class="fas fa-cart-plus me-2"></i>Add to cart</button>
</div>
</div>
</div>
<br />
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<h4 *ngIf="isBottom" style="text-align: center; color: black;">That's it. thanks for reading</h4>
<div class="col-12 align-self-end">
<app-footer></app-footer>
</div>
</div>
</div>
<div class="search-results" infiniteScroll [infiniteScrollDistance]="2"
[infiniteScrollThrottle]="50" (scrolled)="onScroll()"></div>