Topic: Infinite Scroll does not always work
I'm currently using version 1.0.0 of MDB5 Angular (not the beta).
I'm using the infinite scroll as seen in the docs but it doesn't work all the time. At bigger screens it usually works (not always) but on smaller (blow 15 inch) it doesn't work at all.
orders.component.html
<h2 class="h1 fw-bold mb-4">Orders</h2>
<div
class="infinite-scroll text-center"
mdbInfiniteScroll
(infiniteScrollCompleted)="onComplete()"
window="true">
<table mdbTable [fixedHeader]="true" >
<thead class="sticky-top bg-light shadow-sm">
<tr>
<th class="text-end">ID</th>
<th>Vehicle</th>
<th>Customer</th>
<th>Distance</th>
<th class="text-end">Price</th>
</tr>
</thead>
<tbody>
<tr app-order-item *ngFor="let order of orders.orders" [order]="order"></tr>
</tbody>
</table>
<div *ngIf="loading" class="spinner-border text-secondary mx-auto" id="spinner"></div>
</div>
orders.component.ts
import {Component, OnDestroy, OnInit} from '@angular/core';
import {OrderService} from "../../services/order.service";
import {Order} from "../../models/order.model";
import {PaginationMeta} from "../../shared/pagination-meta.model";
@Component({
selector: 'app-orders',
templateUrl: './orders.component.html',
styleUrls: ['./orders.component.scss']
})
export class OrdersComponent implements OnInit, OnDestroy {
orders: { orders: Order[], paginationMeta: PaginationMeta };
loading: boolean = false;
constructor(private orderService: OrderService) {
}
ngOnInit(): void {
this.loading = true;
this.orderService.orders$
.subscribe(orders => {
this.orders = orders;
this.loading = false;
});
this.orderService.getAll();
}
onComplete() {
// stop requests if last page is reached
if (this.loading || this.orders.paginationMeta.current_page == this.orders.paginationMeta.last_page) return;
this.loading = true;
this.orderService.getAll(this.orders.paginationMeta.current_page + 1);
}
ngOnDestroy(): void {
this.orderService.reset();
}
}
order-item.component.ts
<th class="text-end">
{{order.id}}
</th>
<td>
<img [src]="order.vehicle.outside_image_path" alt="vehicle_outside_image" width="75"
[mdbTooltip]="order.vehicle.name">
</td>
<td>
{{order.customer.firstname}} {{order.customer.lastname}}
</td>
<td>
{{order.price.distance}}km
</td>
<td class="text-end">
<span>{{order.price.netPrice / 100 | currency:'EUR'}}</span>
</td>
order-item.component.ts
import {Component, Input, OnInit} from '@angular/core';
import {Order} from "../../../models/order.model";
@Component({
selector: '[app-order-item]',
templateUrl: './order-item.component.html',
styleUrls: ['./order-item.component.scss']
})
export class OrderItemComponent implements OnInit {
@Input() order: Order;
constructor() {
}
ngOnInit(): void {
}
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 1.0.0-beta5
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 3 years ago
@itkaufmann Please provide more information that will help us reproduce this problem on our end. Did you just copy the example from our documentation to a fresh project or do you also use other components in this application view? Which browser and version do you use? Did you test the infinite scroll on the same configuration/browser in both cases?
The screen size should not matter here because the directive only listens to the scroll event and emit event when you reach the bottom of the specific container.
itkaufmann pro premium priority commented 3 years ago
I tested it in Firefox 90.0.2, in Microsoft Edge 92.0.902.67 and in Chrome 92.0.4515.131.To me it looks like the infinite scroll only works randomly and its not about the display size, although it seems to work more often on a bigger screen.
I am using the last example from the documentation, but loading the data from an external source (API) and with the input window="true".The data gets loaded with an http request in the onComplete method and gets displayed as rows of a mdbTable. This table is inside of a sidenav content component because I'm using the sidenav as a menu.
itkaufmann pro premium priority commented 3 years ago
I also tried to remove everything but the mdbTable with the infinite scroll from the application and it did not make a difference.
Arkadiusz Idzikowski staff commented 3 years ago
@itkaufmann Can you edit your post and add an example HTML/TS code on which we will be able to reproduce the problem?
itkaufmann pro premium priority commented 3 years ago
@Arkadiusz Idzikowski I just did
Arkadiusz Idzikowski staff commented 3 years ago
@itkaufmann Thank you, we will take a closer look at that and let you know what we found.
itkaufmann pro premium priority commented 3 years ago
@Arkadiusz Idzikowski Thanks!