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.

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>

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"