Angular (TypeScript): How to scroll to selected element by class

Please don't mark this as duplicate, I have searched and searched and couldn't find a solution

So let's say I have a list of orders called "orders"

In my view I present these orders and their details in a sidebar that has vertical scrolling set:

<div>

<div id="main-content">
Main Content
</div>

<div id="sidebar">

<div *ngFor="let order of orders" [ngClass]="{'selected-order': selectedOrder == order}>
<div>order.orderNumber</div>
<div>order.orderDetails</div>
</div>

</div>

</div>


In my main content I have map that has markers when I click on a marker I'm I want the correct order to be selected and I want the sidebar to scroll and focus on the right order.

This is what I've tried:

function selectMarker() {

//...omitted code

// scroll to correct marker in sidebar
var offset = $(".selected-order").offset();
$('#sidebar').animate({
scrollTop: offset.top,
scrollLeft: offset.left
}, 1000);
}


This is not working, it's not selecting the right element.

Is there a pure Typescript/Angular solution?

Continue reading...