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 {
  }

}