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 9 · Accepted Answer · answered Oct 07 '18 at 07:01

9

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

16,798
1
38
48

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 4 · Answer 2 · answered Dec 08 '20 at 12:23

4

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

3,574
21
44

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

203,447
57
330
376

score -2 · Answer 4 · answered Oct 07 '18 at 15:06

I see that several people have asked this question, but to me, it doesn't make any sense.

When you build an application with Angular, you are building a Single Page Application. That inherently means "one browser window".

What would the expected behavior be if you clicked on a router link, which, by definition, replaces the current component with a new one, if the new component were rendered in a new window?

What you would actually get is a second instance of the application.

I suggest that you either use Angular in the way that it was meant to be used, as an SPA app, or look into using a different framework.

That said, if what you are trying to do is open non-Angular content in a new window (a different site, or something that's served directly by your back-end (e.g. A PDF or a spreadsheet), then just use an anchor tag with an href attribute, instead of a routerLink.

The user can copy and paste the URL and open up new windows all day long. Your application should still be able to function as you cannot control how people will use your application. Unless you plan on keeping track via cookies or localStorage how many "instances" are opened, and actively restricting them, but as a user I would not like that. And as a user, I may think "ctrl+click opens in a new tab on every other site, so it should work here" — Jamieson Rhyne, May 23 '19 at 13:36

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

4 Answers4

Linked