Routerlink works without anchor tag

Question

I just noticed that routerLink works on any element e.g on divs, mat-card, mat-title, etc, without needing to wrap an anchor tag around.

Is that okay / safe to do so or you need to use it with the anchor ? Maybe it can have some bad consequences later if doing so ?

Chary

Answer 1

I think routerLink.navigate is a direcitve which listens on an onclick event.

So as long as using onClick is safe, you are safe to use routerLink too.

Lessen

Sorry, maybe I haven't been explicit enough but I meant without using onClick. An example : <img mat-card-image class="example-image" src="/assets/images/baby.jpg" alt="Photo of a Shiba Inu" routerLink="/family-detail/{{baby.firstname}}" routerLinkActive="active">it just works without using onClick or an anchor tag. – Chary

Look at the source code: github.com/angular/angular/blob/5.2.9/packages/router/src/… The 137: @HostListener('click') line means that if you use that directive, you always listen to a click event to navigate – Lessen