In HTML, there is a <a> that redirects to another component, and after that scrolls to a certain anchor.

In the target component, I have the following code

  ngAfterViewInit(): void {
    this.route.fragment.subscribe(fragment => {
      const elmntLoc: HTMLElement = document.getElementById(fragment);
      window.scroll({
        top: elmntLoc.offsetTop,
        behavior: "smooth"
      });
    });
  }

However, I found that document.getElementById(fragment); is always null, because this element is displayed conditionally using ngIf = booleanVariable, and when this ngAfterViewInit life cycle hook runs, this booleanVariable is not calculated yet.

I am wondering how to make sure ngAfterViewInit runs after booleanVariable is calculated and therefore this element is rendered?

I tried to use setTime but it seems hacky...

Thanks in advance!

CodePudding user response：

Try using _elementRef instead:

this._elementRef.nativeElement.querySelector('#' fragment)

CodePudding user response：

You could try waiting for the next animation frame to give a chance for the html element to render.

ngAfterViewInit(): void {
  this.route.fragment.subscribe(fragment => {
    window.requestAnimationFrame(_ => {
      const elmntLoc: HTMLElement = document.getElementById(fragment);
      window.scroll({
        top: elmntLoc.offsetTop,
        behavior: "smooth"
      });
    }
  });
}

Need to see more of your code to give a more robust answer.