I have a div with inner divs that i can scroll to by passing their id to a function. i wonder how can do the opposite - detect div's id when it's revealed/ scroll to ,and by that changing the class of the button which it's belongs to. So for example - if i scroll to "middle div" (number 5) - i want to be able to detect it and highlight "middle" button - the for all...scroll to last div - and then "last"button should be highlighted.

Example

    @Component({
selector: 'my-app',
template: `
 <div class="main-wrapper">
  <div class="button-wrapper">
  
    <button *ngFor="let item of buttonsArr" 
    [ngClass]="{'active': item.isActive}"
    (click)="scrollToElement(item)"
    class="nav-btn">{{item.key}}</button>
</div>
<div class="content">
    <button (click)="scrollToElement()">Scroll prev</button>
    <button (click)="scrollToElement()">Scroll next</button>
<div class="wrapper">
<li *ngFor="let item of itemList; let i = index" id="elem-{{i}}">{{item}}</li>
</div>
</div>
</div>
 `,
 })
 class HomeComponent {
 text = 'foo';
 buttonsArr = [{key:'first', value:1},{key:'middle', value:4}, {key:'last', 
  value:11}];
testObject = {fieldFirst:'foo'};
itemList = [
'1', 
'2', 
'3', 
'4',
'5',
'6',
'7',
'8',
'9',
'10',
'11',
'12',
];

 scrollToElement(elemId?) {
   if(elemId){
    document.getElementById("elem-"+elemId.value).scrollIntoView({behavior: "smooth", 
    block: "start", inline: "nearest"});
  this.buttonsArr.forEach(i => { i.isActive = false})
  elemId.isActive = true;
  }else{
  document.getElementById("elem-7").scrollIntoView({behavior: "smooth", block: 
   "start", inline: "nearest"});
  }

}

}