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