Get incorrect offsetTop value in AfterViewInit

Question

My code:

Template

<main>
  <p class="head">Create</p>
  
  <div class="progress-bar-container" #progressBar>
    <app-progress-bar [parentFormGroup]="form"></app-progress-bar>
  </div>
</main>

Component

export class CreatePageComponent implements AfterViewInit {
@ViewChild('progressBar') progressBarRef: ElementRef

  ngAfterViewInit() {
      console.log(this.progressBarRef.nativeElement.offsetTop)
  }
}

When I reload the current page I get the correct offsetTop value 215px but when i redirect from any other route i get different value. When i use setTimeout for this console.log the problem goes away. Do you know solution for this issue? Because I think my solution is bad.