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.

score 12 · Accepted Answer · answered Oct 07 '18 at 07:01

12

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>

answered Oct 07 '18 at 07:01

user184994

17,791
1
46
52

I tried it with target="_blank" but still not working with ctrl+click – Marvin Ericson Oct 07 '18 at 07:30
@MarvinEricson Seems to work when I try it in a StackBlitz. Are you able to create a StackBlitz that reproduces the issue? – user184994 Oct 07 '18 at 07:31
but it always opened as a new tab, not just when I press ctrl – Marvin Ericson Oct 07 '18 at 07:37
If you have `target="blank"`, then it will always open in a new tab, regardless of whether or not you're pressing ctrl – user184994 Oct 07 '18 at 07:39

score 7 · Answer 2 · answered Dec 08 '20 at 12:23

7

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"

answered Dec 08 '20 at 12:23

Raphaël Balet

6,334
6
41
78

score 0 · Answer 3 · answered Oct 07 '18 at 07:36

0

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>

answered Oct 07 '18 at 07:36

Sajeetharan

216,225
63
350
396

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

3 Answers3

Linked