Let's assume I have something like this in my code:

<button routerLink="/account" routerLinkActive="active">Account</button>

Is there a way to access this element when it's clicked but without binding click event? At any stage of navigating process?

I want to create reusable component and it would be nice not having to adding some additional logic except routerLink.

Let's assume I have something like this in my code:

<button routerLink="/account" routerLinkActive="active">Account</button>

Is there a way to access this element when it's clicked but without binding click event? At any stage of navigating process?

I want to create reusable component and it would be nice not having to adding some additional logic except routerLink.

• angular
• angular-router
• angular-routerlink

Share Improve this question Follow asked Mar 23 at 18:14 Michał BMichał B 51511 gold badge55 silver badges1616 bronze badges 1

• How are you going to use the reusable component? Is it going to be a wrapper around button/link/etc and use ng-content? If so, you can use contentChild(RouterLink, { read: ElementRef<HTMLElement> }), and listen to any event in ngAfterContentInit. – I.Orlovsky Commented Mar 24 at 23:23

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I would use attribute directive for this.

import { Directive, ElementRef, inject } from '@angular/core';

@Directive({
  selector: '[appLink]',
  host: {
    '(click)': 'doSomething($event)',
  },
})
export class LinkDirective {
  private elementRef = inject(ElementRef);

  doSomething(event: PointerEvent): void {
    // ...
  }
}

If you want to apply this directive to every element with routerLink, you can specify this in selector:

selector: '[routerLink]',