Navigate to a specified position on a dynamic Angular 2 page

Question

If I have scrolled down on a page where multiple elements have been generated on *ngFor, clicking on an element brings me to a different page via the router. When I click on a button to get back to the previous page, I would like the screen to be scrolled down to the position I was in before I left the page.

How can I achieve this?

Take a look on [**#fragment**](https://angular.io/docs/ts/latest/api/router/index/NavigationExtras-interface.html). It may help you. — developer033, Feb 21 '17 at 15:26
Thanks, I did try fragment, but it tries to access the DOM before all the elements have been generated. — j-meiring, Feb 22 '17 at 11:29
You may ask a new question with this issue. Someone could help you.. — developer033, Feb 22 '17 at 11:55
@j-meiring I am trying to achieve the same thing. Did you make any progress on this? — bob, Jul 20 '17 at 00:59
@bob in the end we opened the new element using a modal to achieve this. — j-meiring, Jul 21 '17 at 07:18

score 1 · Answer 1 · answered Aug 04 '17 at 22:47

Let's suppose List page has ngFor loop like:

<div *ngFor="let note of (noteService.notes | async); let i = index" class="item" tabindex="0">
  <a (click)="edit(note, i, $event)">
    {{note.text}}
  </a>
</div>

In edit function, it provides additional index into url like ...?i=11:

this.router.navigate(['group', this.noteService.groupName, 'edit', note.$key],
  { queryParams: { i: index } }); // pass in additional index in ngFor loop

Edit page remembers index as this.noteIndex in ngOnInit, then when going back:

this.router.navigate(['group', this.noteService.groupName],
  { queryParams: { i: this.noteIndex } }); // to let List page focus this note

Then List page's ngOnInit can do below:

this.noteService.announcedCountNotes.subscribe(
  count => {
    // noteService announces new count after it saves edit
    // so by now, ngFor should be ready
    if (idxToFocus) { // this.route.snapshot.queryParams['i'];
      setTimeout(_ => {
        var elements = document.querySelectorAll('div.item');
        var len = elements.length;

        if (len > 0 && idxToFocus >= 0 && idxToFocus < len) {
          const el = elements[idxToFocus] as HTMLElement;
          //el.scrollIntoView();
          el.focus();
        }
      }, 0);
    }
  }
)

You might want to provide specific style for div.item:focus, this way worked at least on Chrome 59 (Windows 7 and iPad) for me.

I like the cleverness of getting the HTMLElements by using querySelectorAll — Jon, Nov 30 '17 at 03:40

Navigate to a specified position on a dynamic Angular 2 page

1 Answers1