Appreciate it, the stackblitz is now up and running smoothly. Below is the implementation code for reference.

Infinite Scroll Implementation in JS <- this article was a great help

We initiate the API call on load with page number 1. Subsequent scrolls trigger an increment of the page number, leading to another API call where new results are added to the array, creating an infinite scroll effect!

ngAfterViewInit() {
    fromEvent(window, 'scroll')
      .pipe(
        startWith(0),
        map((x) => window?.scrollY),
        distinctUntilChanged()
      )
      .subscribe((scrollPos: any) => {
        if (!this.movies?.length) {
          return;
        }
        console.log(scrollPos + window.innerHeight); //scrolled from top
        console.log(document.documentElement.scrollHeight); //visible part of screen
        if (
          Math.round(scrollPos + window.innerHeight) >=
            document.documentElement.scrollHeight &&
          this.pageNumber < this.maxPage
        ) {
          this.pageNumber++;
          this.getMoviesByPage(this.genreId, this.pageNumber);
        }
      });
  }

FULL CODE:

TS:

import { Component, EventEmitter, HostListener } from '@angular/core';
import { GenreResponse, Genre } from '../../models/Genre';
import { MovieResponse, Movie } from '../../models/Movie';
import { MovieService } from '../../services/movie-service.service';
import { ActivatedRoute } from '@angular/router';
import { distinctUntilChanged, fromEvent, map, startWith } from 'rxjs';

@Component({
  selector: 'app-movies-by-genre',
  templateUrl: './movies-by-genre.component.html',
  styleUrls: ['./movies-by-genre.component.scss'],
})
export class MoviesByGenre {
  constructor(
    private activatedRoute: ActivatedRoute,
    private movieService: MovieService
  ) {}

  public genreName: string | undefined = '';

  public movieResponse!: MovieResponse;
  public movies: Movie[] = [];
  public moviesBuffer: Movie[] | undefined = [];

  public genreResponse!: GenreResponse;
  public genres: Genre[] | undefined = [];
  scrollCount = 10;
  genreId!: number;
  maxPage: number = 10;
  pageNumber: number = 1;
  isLoading: boolean = false;
  public getMoviesByGenre(): void {
    // Get genre id (from URL parameter)
    this.genreId = Number(this.activatedRoute.snapshot.paramMap.get('id'));

    // Get genre name from genres array
    this.movieService.getAllMovieGenres().subscribe((response) => {
      this.genreResponse = response;
      this.genres = this.genreResponse.genres;

      if (this.genres && this.genres.length) {
        let currentGenre = this.genres.find(
          (genre) => genre.id === this.genreId
        );
        if (currentGenre) {
          this.genreName = currentGenre.name || '';
          this.movieService.defaultTitle = this.genreName;
        }
      }
    });
    this.getMoviesByPage(this.genreId, this.pageNumber);
  }

  getMoviesByPage(genreId: number, pageNumber: number) {
    // Get movies by genre id
    this.movieService
      .getMoviesByGenre(genreId, pageNumber)
      .subscribe((response) => {
        this.movieResponse = response;
        this.movies.push(...(this.movieResponse?.results || []));
      });
  }

  ngAfterViewInit() {
    fromEvent(window, 'scroll')
      .pipe(
        startWith(0),
        map((x) => window?.scrollY),
        distinctUntilChanged()
      )
      .subscribe((scrollPos: any) => {
        if (!this.movies?.length) {
          return;
        }
        console.log(scrollPos + window.innerHeight); //scrolled from top
        console.log(document.documentElement.scrollHeight); //visible part of screen
        if (
          Math.round(scrollPos + window.innerHeight) >=
            document.documentElement.scrollHeight &&
          this.pageNumber < this.maxPage
        ) {
          this.pageNumber++;
          this.getMoviesByPage(this.genreId, this.pageNumber);
        }
      });
  }

  ngOnInit() {
    this.activatedRoute.params.subscribe(() => {
      this.getMoviesByGenre();
    });
  }

  ngOnDestroy() {
    this.movieService.defaultTitle = '';
  }
}

HTML

<ng-container *ngIf="movieResponse">
  <div class="row grid">
    <div
      *ngFor="let movie of movies"
      class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"
    >
      <app-movie-card class="movie card" [movie]="movie"></app-movie-card>
    </div>
  </div>
</ng-container>

Check out the Stackblitz Demo

To implement infinite scroll, we need to access the scrollable div using ViewChild.

@ViewChild('scroller') scroller!: ElementRef<any>;

In the ngAfterViewInit, utilize rxjs fromEvent to listen for scroll events and apply necessary logic accordingly.

ngAfterViewInit() {
    if(scroller?.nativeElement) {
        // for window or anything else
        // fromEvent(window, 'scroll')
        // for some div
        fromEvent(scroller.nativeElement, 'scroll').pipe(
            startWith(0), 
            map(x => window?.scrollY), 
            distinctUntilChanged(),
        ).subscribe((scrollPos: any) => {
            // apply logic here!
        });
    }
}