Tengo un div con divs internos a los que puedo desplazarme pasando su id a una función. Me pregunto cómo puedo hacer lo contrario: detectar la identificación de div cuando se revela/desplazarse hacia, y así cambiar la clase del botón al que pertenece. Entonces, por ejemplo, si me desplazo a "div medio" (número 5), quiero poder detectarlo y resaltar el botón "medio" - para todos ... desplácese hasta el último div - y luego el botón "último" debería ser resaltado.

Ejemplo

 @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"}); } }

}