CODEWITHSUNDEEP
javascriptangularangular7
Anand Siddharth
Anand Siddharth

Reputation: 977

How to make Angular 7 scroll to component repeated with ngFor

I have a looping template I need to scroll to specific item when that item get's active how do i do that.

My template loop is :


<div class="tabs-list-item-container"> <!-- this is a horizontal scrollable wrapper -->
   <app-tab-list-item *ngFor="let tab of tabs" [tabSession]="tab" [class.active]="tab.isActive"></app-tab-list-item>
</div>

The tab object has isActive property which I need to use and scroll to that component can it be achieved?

Upvotes: 1

Views: 2043

Answers (1)

Nithya Rajan
Nithya Rajan

Reputation: 4884

Whenever the user selects an item, the below method should get invoked. scrollIntoView() will scroll to the element which has .active class

scrollToActive() {
   document.querySelector('.active').scrollIntoView();
}

Upvotes: 2

Related Questions