How to enable "ctrl+click" with "routerLink" in Angular

Question

In Angular, if you use this:

<div routerLink="/home"> <img src="..." /> </div>

When I press on image it routes perfect, I want to press ctrl+click to open this link in new tab, or drag this image to a new tab, but when I press ctrl+click it opened in same page, and if I drag it, the image opened in new tab not the link, I tried to use target="_blank" but it is not working.

Sargent

Answer 1

Instead of using a div tag, you will need to use an a tag so that the browser knows to treat it like a link.

<a routerLink="/home"> <img src="..." /> </a>

Orella

I tried it with target="_blank" but still not working with ctrl+click – Sargent

@MarvinEricson Seems to work when I try it in a StackBlitz. Are you able to create a StackBlitz that reproduces the issue? – Orella

but it always opened as a new tab, not just when I press ctrl – Sargent

If you have target="blank", then it will always open in a new tab, regardless of whether or not you're pressing ctrl – Orella

Answer 2

You can add a link role to the div

<div routerLink="/home" role="link">
  <img src="..." /> 
</div>

If you want to enable the "ctrl+click" behavior and don't :

• want to change your div tag to an a tag
• Use target="_blank"

Infeudation

Answer 3

Seems you are facing similar issue mentioned here , i would recommend you to try something like this,

<a routerLinkActive="active" [routerLink]="['/home']" ><img src="..." /></a>

Lustral