Recently delving into Angular2, my aim is to set up Scroll Pagination for dynamic data loading upon user scrolling.
My application comprises three key Components: App.Component, Categories.Component, and Products.Component.
The primary objective is to present products in a paginated manner. Below is the code snippet from Products.Component:
@Component({
selector: 'products',
template: `<div class="products-wrapper grid-4 products clearfix loading">
<div *ngFor="#product of products" (click)="getProduct(product)" class="product">
<div class="product-inner" style="background:url({{product.pictureUrl}})">
<div class="time-left">
<span class="text">Hourly Deal</span>
<ul class="countdown clearfix">
<li>
<div class="text">
<span class="hours">00</span>
</div>
</li>
<li>
<div class="text">
<span class="minutes">00</span>
</div>
</li>
<li>
<div class="text">
<span class="seconds">00</span>
</div>
</li>
</ul>
</div>
<span class="discount-tag">{{product.discount}}%</span>
</div>
</div>
</div>`,
providers :[CategoryService]
})
@Injectable()
export class ProductsComponent {
private product:ProductModel;
private products: ProductModel[] = [];
constructor(private _categoryService : CategoryService)
{
this._categoryService.getProducts(0)
.subscribe(
a=>{
this.products = a;
}
);
}
getProduct(product:ProductModel)
{
alert(product.productId);
this.product = product;
}
populateProducts(products: ProductModel[] = [])
{
this.products = products;
}
}
To enable pagination of products when reaching the bottom of the scroll on the page, your assistance would be greatly appreciated.
Please provide guidance. Thank you.