How to make Angular 7 scroll to component repeated with ngFor

Question

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?

Answer 1

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();
}