I am working on an angular2 application (RC5) that includes a chapter component containing a large template file named chapter.html. The template features different sections for each chapter specified by conditionals like:
<div *ngIf="chapter == 1">
<!-- Chapter 1 content -->
</div>
<div *ngIf="chapter == 2">
<!-- Chapter 2 content -->
</div>
<!-- etc. -->
Additionally, the component has arrow buttons for navigating to the next or previous chapters. Clicking these buttons triggers an event like:
if (this.chapter !== '6') {
var next = parseInt(this.chapter) + 1;
console.log(next);
let link = ['/tutorial/chapter', next];
this.router.navigate(link);
}
While the navigation functions correctly, the issue arises when the buttons are clicked, and the page automatically scrolls down to the next chapter. I want to trigger an event to scroll to the top of the page when navigating to a new chapter, but the ngOnInit() function is not called as the component remains the same. How can I achieve this?