How to trigger an event when component is navigated to?

Question

I have an angular2 application (RC5), where I have a chapter component. This basically has a big template file - chapter.html - which has this:

<div *ngIf="chapter == 1">
<!-- Chapter 1 content -->
</div>
<div *ngIf="chapter == 2">
<!-- Chapter 2 content -->
</div>
<!-- etc. -->

I then have some arrow buttons for next and for previous chapters. These trigger an event e.g.

if (this.chapter !== '6') {
  var next = parseInt(this.chapter) + 1;
  console.log(next);
  let link = ['/tutorial/chapter', next];
  this.router.navigate(link);
}

So that all works fine, however, the buttons are at the bottom of a chapter, so when they are clicked, the next chapter is displayed, but automatically scrolled down. So on the router click, I would like to trigger an event and scroll to the top of the page, however, as I am navigating to the same component, ngOnInit() isn't triggered.

How can I do this?

@epascarello yes exactly, but I want an event to execute that from, which is triggered after the component is navigated too — George Edwards, Sep 08 '16 at 16:41
So listen for when the chapter is updated or router.subscribe? — epascarello, Sep 08 '16 at 16:44
old question but i think now you can configure the root routing module with `scrollPositionRestoration: 'top'` — Ayyash, Nov 21 '22 at 05:19

score 2 · Accepted Answer · answered Sep 08 '16 at 16:44

2

If you navigate to the same component, at least a parameter has changed, otherwise the router wouldn't re-navigate.

You can subscribe to parameter changes and invoke scrolling on changes

constructor(private route:ActivatedRoute) {
  this.route.params.forEach(p => this.doScroll());
}

answered Sep 08 '16 at 16:44

Günter Zöchbauer

623,577
216
2,003
1,567

Also, How would you recommend scrolling to the top of a vertically overflowing div? Maybe as in your [answer](http://stackoverflow.com/questions/37376442/where-does-dom-manipulation-belong-in-angular-2) here? – George Edwards Sep 08 '16 at 22:02
Can't you just set scrollTop to 0? – Günter Zöchbauer Sep 10 '16 at 14:23
as in `window.scrollTop=0;`? – George Edwards Sep 10 '16 at 14:24
I thinks so. I don't know it by heart and I'm currently only on the phone. – Günter Zöchbauer Sep 10 '16 at 14:57

score 2 · Answer 2 · answered Sep 08 '16 at 16:51

2

constructor(private route:ActivatedRoute) {
  this.route.params.subscribe(params => {
        //do your stuffs...
  });
}

answered Sep 08 '16 at 16:51

micronyks

54,797
15
112
146

How to trigger an event when component is navigated to?

2 Answers2