Anchor scrolling only works on second click in Angular 6

Issue

I have a very basic setup on a very long page:

<a href="/technicalmanagerreport/4e8485d9-5751-4684-9d24-0af2934dd390#h2">test</a>
<h2 id="h2">LOL</h2>

First time I click the link, it jumps down very fast and then back to top. Second time it works. If I click the link, and then another link and then the link again same behavior. So it needs to be two clicks in a row. Any ideas or maybe work arounds??

After some more digging:

<a href="technicalmanagerreport/4e8485d9-5751-4684-9d24-0af2934dd390#lol">test</a>

 <div *ngFor="let group of report?.assetGroups">

    <div><a href="technicalmanagerreport/4e8485d9-5751-4684-9d24-0af2934dd390#{{group?.code}}">{{group.name}}</a></div>
 </div>


<div *ngFor="let group of report?.assetGroups">
    <div id="{{group?.code}}">{{group?.name}}</div>
    <div *ngFor="let subGroup of group?.assetSubGroupList">
        <h4>{{subGroup.name}}</h4>
      </div>
</div>

<div id="lol">lol</div>

The test link works as expected. Can it be something with the other values coming from a call to a REST service, that is an async call?

Solution

Only solution I could find for this issue is wrapping the scroll function with a setTimeOut function. Although its not a best practice, this approach solves it for sure.

  scroll(link: string) {
  window.location.href = this.href + '#' + link;
  setTimeout(() => {document.querySelector('#' + link).scrollIntoView()}, 0);

}

Answered By - Hikmert