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

Direction

Use [direction] input to define the scrolling direction.

Angry Dizzy Flushed Grimace Grin

Spinners and asynchronous data

Infinite scroll - API


Import


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

Inputs

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

Outputs

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

          <div style="width: 200px">
            <ul
              mdbInfiniteScroll
              (infiniteScrollCompleted)="onComplete()"
              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 }}
              </li>
            </ul>
          </div>
        

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

          @Component({
            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 = [
              'Sad-Tear',
              'Meh-Blank',
              'Smile-Wink',
              'Tired',
              'Surprise',
              'Kiss-Beam',
              'Laugh-Squint',
            ];

            index = 0;

            constructor() {}

            onComplete(): void {
              if (this.index < this.iconsToLoad.length) {
                this.icons.push(this.iconsToLoad[this.index]);
                this.index++;
              }
            }
          }