Scroll to a specific element in web the age

Question

I have a list of radio button and want to scroll dynamically to the selected value on this list:

We can't see the selected value in the list on the right because it's at the bottom of the list:

This is my template:

<div class="radio" *ngFor="let kit of seasonKitOptions" >
    <label>
            <input
                type="radio"
                name="{{ homeOrAway }}-color-kit-option"
                [(ngModel)]="colorKit"
                [value]="kit"
                (ngModelChange)="onSeasonKitSelected($event)"
                #selectedKit
            />
            {{ kit.season.name }} -{{ kit.name }} - 
            <span class="color-box" [style.background-color]="kit.jersey_color"
                  [style.color]="kit.number_color">Jersey</span>
      </label>
</div>

Thank you in advance for any help.

I think this might already be answered here: https://stackoverflow.com/questions/43945548/scroll-to-element-on-click-in-angular-4/43945776 and here: https://stackoverflow.com/questions/45742611/scroll-to-a-certain-element-of-the-current-page-in-angular-4 — chrismclarke, Aug 22 '19 at 14:04
@chrismclarke the problem is I can't get `#target` of the selected value in my template! I already saw that post before posting it my self here. — yosra, Aug 22 '19 at 14:10
ah, ok in that case you need to use a viewChild as explained in the answer below — chrismclarke, Aug 22 '19 at 14:22

Ansuman · Accepted Answer · 2019-08-22T14:19:54.817

4

You could use 'scrollIntoView':

In the template:

  <div #elem>This is the block where you want to scroll</div>

In the component:

  @ViewChild('elem') elem: ElementRef; // elem is the element where you want to dynamically scroll to

and then on some event:

  if (this.elem) {
      this.elem.nativeElement.scrollIntoView({behavior: 'smooth'});
  }

For dynamic elements created inside ngFor, I think we can set unique ids and on some event use this to scroll to that particular element:

  document.querySelector(dynamicID).scrollIntoView();

edited Aug 22 '19 at 14:19

answered Aug 22 '19 at 14:06

Ansuman

1,404
4
14
32

Yeap but how can I get the `elem` according to my template? – yosra Aug 22 '19 at 14:07
1

I have updated my answer. Basically you need to add a template reference variable (In the above case '#elem') for the element where you want to scroll dynamically – Ansuman Aug 22 '19 at 14:10
Thanks for the update. But the major problem is how can I get the #elem from my template since I'm using a loop. – yosra Aug 22 '19 at 14:12
2

In that case create ids for the inputs inside ngfor and then on some event pass the id to function containing following: document.querySelector(dynamicID).scrollIntoView(); – Ansuman Aug 22 '19 at 14:17
I get what I have to do now, but I'm struggling with the creation of the event that will send the element id, can you please help me with that? – yosra Aug 22 '19 at 14:46
Can you create an example in Stackblitz and share the link here. Will try to help :) – Ansuman Aug 22 '19 at 14:47
That's okay I figured it out! Thanks a lot :) – yosra Aug 22 '19 at 14:57

Scroll to a specific element in web the age

1 Answers1