I need to implement scrool with an anchor (in my case skip the link).

<div class="skip-link" >
    <a accesskey="1" tabindex="0" id="skiplink1" [routerLink]="url" [fragment]="SKIP_LINK_URL"> {{ 'APPLICATION.HEADER.a' | translate }}</a>
</div>


<app-header>

</app-header>
<router-outlet [id]="SKIP_LINK_URL" style="position: relative"></router-outlet>

TO PASS THE URL IN MY TS I DO:

ngAfterViewInit(): void {   

    this.router.events.subscribe((ev) => {
      if (ev instanceof NavigationEnd) {

          let locationUrl: string = ev.url;   
    
       
           const firstHash= locationUrl.indexOf('#'+this.SKIP_LINK_URL);
           if (firstHash!== -1) {
               locationUrl = locationUrl.substring(0, firstHash);
             
                this.scrollBottom();          //here is the problem because I think the component is not created
             
           }
        this.url = locationUrl;     
     
    
      }
    }


scrollBottom() { 
    this.viewportScroller.scrollToAnchor(this.SKIP_LINK_URL);
   
  }

The problem is this.scrollBottom(); because when this method is executed the component is not created. I know that the method ngAfterViewInit is called after the view is created so I don't why there is this problem. I try to put a set interval in this.scrollBottom(); and the programs works fine, but I don't want use an interval solution. Can anyone help me?