I'm an aspiring developer looking to enhance my application by integrating the tmDB API. However, I am facing challenges as a newcomer and need guidance on how to add more pages.
Within my movie component, I have a Movie Service that includes the following method:
discoverMovies(page: number) {
let discover = `${this.discoverUrl}?api_key=${this.apiKey}&language=${this.language}&sort_by=popularity.desc&include_adult=false&include_video=false&page=${page}`;
return this.http.get(discover);
}
While this code currently displays the first 20 movies on the page, I wish to implement pagination so that users can navigate to subsequent pages seamlessly. Unfortunately, I am unsure how to update the value of ${page} in movies.service.ts (discoverMovies) or in the HTML file.
To demonstrate how I achieved displaying 20 movies on my page:
In movies.service.ts:
getMovies(query: string = '', page: number = 1) {
if ((query = '')) {
return this.discoverMovies(page);
}
if (query) {
return this.searchMovies(query, page);
} else {
return this.discoverMovies(page);
}
}
In movies.component.ts:
getMovies() {
this.moviesService.getMovies(this.movieName).subscribe((paramName) => {
this.actualPage = (paramName as any).page;
this.totalPages = (paramName as any).total_pages;
this.movies = (paramName as any).results;
});
}
In movies.component.html:
<div class="row">
<div *ngFor="let movie of movies" class="col-sm-4">
<div class="card">
<div class="card-body">
<h4 class="card-title" style="text-align: center;">{{movie.title}}</h4>
<hr>
<img *ngIf="movie.poster_path" [src]="getImage(movie.poster_path)" class="posterPath">
<img *ngIf="!movie.poster_path" class="posterPath" src="https://placehold.it/500x740">
<div class="movies-info">
Release Date: {{movie.release_date}} <span><img src="https://www.kindpng.com/picc/b/29/298871.png"
alt="logo-star">{{movie.vote_average}}</span>
</div>
<p class="card-text" style="text-align: center;">{{movie.overview}}</p>
<a class="btn btn-primary" id="movie-details">Details</a>
</div>
</div>
</div>
</div>
At this point, I aim to dynamically modify the value of ${page} in movies.service.ts by clicking on buttons:
<div class="pagination">
<button class="btn btn-primary">-</button>
<input type="text" [value]="actualPage" readonly>
<button class="btn btn-primary">+</button>
</div>