Angular: detect click on current page link

Question

Is there any way to use Angular build in router properties, such as RouterLinkActive to detect click on the link to current page? In the footer I want to add function to scroll to top if clicked on the current page link.

I have this:

<a *ngIf="!sublinkItem.outerLink" [title]="sublinkItem.altText"
  [routerLink]="[sublinkItem.link]" routerLinkActive="active" 
  [routerLinkActiveOptions]="{exact: true}"                                     
  class="dropdown-item outer-link" 
  [innerHTML]="sublinkItem.text">
</a>

And I have function in the component:

scrollToTop(): void {...}

I want to fire this function only, if routerLinkActive is true.

Tsvetan Ganev · Accepted Answer · 2022-11-29 20:45:39Z

1

You can use the instance reference of the RouterLinkActive directive in your HTML template. Note - I removed some attributes for brevity:

<a 
  [routerLink]="[sublinkItem.link]" 
  routerLinkActive="active"
  #routerLinkActiveRef="routerLinkActive"
  [routerLinkActiveOptions]="{exact: true}"                                     
  (click)="scrollToTop(routerLinkActiveRef.isActive)"
>
 {{ sublinkItem.text }}
</a>

And in your component code:

scrollToTop(shouldScroll: boolean): void {
  if (!shouldScroll) {
    return;
  }

  // scroll!
}

answered Nov 29, 2022 at 20:45

Tsvetan Ganev

8,9164 gold badges32 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular: detect click on current page link

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related