"Argument of type 'Event' is not assignable to parameter of type 'InfiniteScrollCustomEvent'.\n

Issue

i've an issue in ionic angular

this is my movies.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Trending Movies</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item button *ngFor="let item of movies">
      <ion-avatar slot="start">
        <img [src]="imageBaseUrl + '/w92' + item.poster_path" />
      </ion-avatar>
      <ion-label
        >{{ item.title }}
        <p>{{item.release_date | date:'y'}}</p>
      </ion-label>

      <ion-badge slot="end">{{item.vote_average}}</ion-badge>
    </ion-item>
  </ion-list>

  <ion-infinite-scroll threshold="25%" [disabled]="true" position="bottom" (ionInfinite)="loadMore(($event))">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

and this is my movies.page.ts file

import { InfiniteScrollCustomEvent, LoadingController } from '@ionic/angular';
import { MovieService } from './../../services/movie.service';
import { Component, OnInit } from '@angular/core';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-movies',
  templateUrl: './movies.page.html',
  styleUrls: ['./movies.page.scss'],
})
export class MoviesPage implements OnInit {
  movies: any[] = [];
  currentPage = 1;
  imageBaseUrl = environment.images;

  constructor(
    private movieService: MovieService,
    private loadingCtrl: LoadingController
  ) {}

  ngOnInit() {
    this.loadMovies();
  }

  async loadMovies(event?: InfiniteScrollCustomEvent) {
    const loading = await this.loadingCtrl.create({
      message: 'Loading..',
      spinner: 'bubbles',
    });
    await loading.present();

    this.movieService.getTopRatedMovies(this.currentPage).subscribe((res) => {
      loading.dismiss();
      // this.movies = [...this.movies, ...res.results];
      this.movies.push(...res.results);
      console.log(res);

      if (event) {
        event.target.complete();
        event.target.disabled = res.total_pages === this.currentPage;
      }
    });
  }

  loadMore(event: InfiniteScrollCustomEvent) {
    this.currentPage++;
    this.loadMovies(event);
  }
}

and the error message is

Argument of type 'Event' is not assignable to parameter of type 'InfiniteScrollCustomEvent'. Type 'Event' is missing the following properties from type 'InfiniteScrollCustomEvent': detail, initCustomEventngtsc(2345) movies.page.ts(12, 15): Error occurs in the template of component MoviesPage.

i've try to solve this error and not even worked

Solution

Follow the sample provided in the ion-infinite-scroll documentation,

1. Declare event as any type.
2. Cast event as InfiniteScrollCustomEvent and pass to loadMovies method.

loadMore(event: any) {
  this.currentPage++;
  this.loadMovies(event as InfiniteScrollCustomEvent);
}

Meanwhile,

(ionInfinite)="loadMore(($event))"

Remove the nested parenthesis as not needed.

(ionInfinite)="loadMore($event)"

Answered By - Yong Shun