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 
        
            
            <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++;
                }
              }
            }

Direction

Use [direction] input to define the scrolling direction.

Angry Dizzy Flushed Grimace Grin 
        
            
            <div
            mdbInfiniteScroll
            [direction]="'horizontal'"
            (infiniteScrollCompleted)="onComplete()"
            class="py-3 text-center"
            style="max-width: 1500px; overflow-x: scroll; white-space: nowrap"
          >
            <span *ngFor="let icon of icons" class="mx-5"
              ><i class="far fa-{{ icon.toLowerCase() }} fa-3x me-4"></i> {{ icon }}</span
            >
          </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++;
                }
              }
            }

Spinners and asynchronous data

        
            
            <div
              class="infinite-scroll py-3 text-center"
              mdbInfiniteScroll
              (infiniteScrollCompleted)="onComplete()"
              style="max-height: 500px; overflow-y: scroll"
            >
              <div id="images">
                <img *ngFor="let image of images" [src]="image" class="img-fluid mb-3" />
              </div>
              <div *ngIf="loading" class="spinner-border mx-auto" id="spinner"></div>
            </div>
          
        
    
        
            
            import { Component } from '@angular/core';

            @Component({
              selector: 'app-infinite-scroll',
              templateUrl: './infinite-scroll.component.html',
              styleUrls: ['./infinite-scroll.component.scss'],
            })
            export class InfiniteScrollComponent {
              images = [
                'https://mdbootstrap.com/img/Photos/Slides/img%20(100).webp',
                'https://mdbootstrap.com/img/Photos/Slides/img%20(105).webp',
                'https://mdbootstrap.com/img/Photos/Slides/img%20(107).webp',
              ];

              imagesToLoad = [
                'https://mdbootstrap.com/img/Photos/Slides/img%20(103).webp',
                'https://mdbootstrap.com/img/Photos/Slides/img%20(104).webp',
                'https://mdbootstrap.com/img/Photos/Slides/img%20(108).webp',
                'https://mdbootstrap.com/img/Photos/Slides/img%20(109).webp',
                'https://mdbootstrap.com/img/Photos/Slides/img%20(110).webp',
              ];

              index = 0;
              loading = false;

              constructor() {}

              onComplete(): void {
                if (this.index < this.imagesToLoad.length) {
                  this.loading = true;
                  // Simulate async loading
                  setTimeout(() => {
                    this.images.push(this.imagesToLoad[this.index]);
                    this.indexx++;
                    this.loading = false;
                  }, 1500);
                }
              }
            }

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++;
                  }
                }
              }