I have a basic webpage showcasing a list of videos. Towards the bottom of the page, there is a button labeled "Load more". When a user clicks on this button, an HTTP request is triggered to add more data to the existing array of videos.
Here is a simplified version of the code:
Component:
export class AppComponent implements OnInit {
public videoList = [];
constructor(private appService: AppService) {}
public ngOnInit(): void {
this.loadVideos();
}
public loadMore(): void {
this.loadVideos();
}
private loadVideos(): void {
this.appService.loadVideos().subscribe((videos) => {
this.videoList = [...this.videoList, ...videos];
console.log('Data was loaded');
})
}
}
Template:
<div *ngFor="let video of videoList">
<div style="height: 100px;">{{video.name}}</div>
</div>
<div class="d-flex justify-content-center mt-2 mb-4">
<button class="btn btn-outline-danger btn-lg" (click)="loadMore()">Load more...</button>
</div>
The Issue:
On Firefox, the page does not scroll after loading more items, causing only the first new item to be visible. On Chrome, the page automatically scrolls to the end, showing the last new item and the 'load more' button again.
Demo:
https://stackblitz.com/edit/angular-ivy-quwfxx?devtoolsheight=33&file=src/app/app.component.html