Как мне использовать @HostListener внутри метода в этом приложении Angular 16?

Спасибо, stackblitz заработал, код реализации смотрите ниже.

Как сделать бесконечную прокрутку в JS <- мне помогла статья

Мы можем просто вызвать вызов API при загрузке с номером страницы 1. Затем при каждой последующей прокрутке мы увеличиваем номер страницы, а затем снова выполняем вызов API, но мы помещаем новые результаты в массив, а не присваиваем их, это создает эффект бесконечной прокрутки!

ngAfterViewInit() {
    fromEvent(window, 'scroll')
      .pipe(
        startWith(0),
        map((x) => window?.scrollY),
        distinctUntilChanged()
      )
      .subscribe((scrollPos: any) => {
        if (!this.movies?.length) {
          return;
        }
        console.info(scrollPos + window.innerHeight); //scrolled from top
        console.info(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);
        }
      });
  }

ПОЛНЫЙ КОД:

ТС:

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.info(scrollPos + window.innerHeight); //scrolled from top
        console.info(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>

Демо-версия Stackblitz

Нам нужно взять ViewChild прокручиваемого элемента div.

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

Затем в ngAfterViewInit мы можем использовать rxjs fromEvent для прослушивания прокрутки и применения необходимой вам логики.

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!
        });
    }
}