Infinite scroll

Angular Bootstrap 5 Infinite scroll

This feature adds a scroll event listener (to the window or the component it's attached to if it has the overflow-y property set to scroll) and calls a callback method every time a user reaches an end of a page/container.

Note: Read the API tab to find all available options and advanced customization

Basic example

Scroll down the container below to add more items.

Note: Your element should be scrollable, for example, it should have overflow-y: scroll property like in the example below.

  • Angry
  • Dizzy
  • Flushed
  • Frown
  • Grimace
  • Grin


Use [direction] input to define the scrolling direction.

Angry Dizzy Flushed Grimace Grin

Spinners and asynchronous data

Infinite scroll - API


        import { MdbInfiniteScrollModule } from 'mdb-angular-ui-kit/infinite-scroll';
        @NgModule ({
          imports: [MdbInfiniteScrollModule],


Name Type Default Description
direction MdbInfiniteScrollDirection 'vertical' Defines scroll direction (horizontal or vertical)
window boolean false Defines window as a scroll container


Name Type Description
infiniteScrollCompleted EventEmitter<any> Event fired when scroll reaches bottom of a container

          <div style="width: 200px">
              class="container list-group"
              style="max-height: 261px; overflow-y: scroll"
              <li *ngFor="let icon of icons" class="list-group-item d-flex align-items-center">
                <i class="far fa-{{ icon.toLowerCase() }} fa-3x me-4"></i> {{ icon }}

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

            selector: 'app-infinite-scroll',
            templateUrl: './infinite-scroll.component.html',
            styleUrls: ['./infinite-scroll.component.scss'],
          export class InfiniteScrollComponent {
            icons = ['Angry', 'Dizzy', 'Flushed', 'Frown', 'Grimace', 'Grin'];

            iconsToLoad = [

            index = 0;

            constructor() {}

            onComplete(): void {
              if (this.index < this.iconsToLoad.length) {