How to allow 'Open in a new tab' when using ng-click?

Question

I have a table on HTML and each row leads to a different page, with more details about that row. But as I am using angularjs, with ng-click I can't right click this row and select 'open in a new tab'. Is there any way to solve it?

Thanks in advance!

Militia

Have you read this yet? #17758337 – Inscrutable

Yep, but that is not my problem. I dont want to ALWAYS open in a new tab, but with ng-clik this window doesn't appear when you right-click the row: puu.sh/88Mbz.png – Militia

what about let the browser manage this when right click? – Akene

That was all that I wanted, but the browser isn't managing. this is what happens when right click the row puu.sh/88Nss.png. It doesn't interpret as a link. – Militia

You should convert your element to href <a ng-href"{{your dynamic url}}" ng-click="your function">. Not only do you have to show the correct dropdown, but also have a correct href value to open in a new tab. – Moonlight

No problem @jgabrielfaria, added a answer, and would appreciate it if you marked it as correct answer 8-) – Moonlight

Answer 1

If possible you should convert your element to an anchor element.

<a ng-href="{{ your dynamic url }}" ng-click="your function">Your link text</a>

The browser will interpret the element as a link, and will therefor give you the correct dropdown. Note that you also have to have the correct href value to open in a new tab.

EDIT: I would recommend this question if you want a more detailed answer on how to fix this kind of behaviour using JQuery.

Moonlight

This is a little confusing. The example makes it sound like I need both ng-href and ng-click on the same element. – Veracity

I can see that. But the question was "How to allow 'Open in a new tab' when using ng-click?" Interrpeted it as he wanted to have the 'Open in a new tab' option on a element that also used ng-click. – Moonlight

You would only need either ng-click or ng-href , if you want both of them to open the link in a new tab . The angularJS code checks if the browser URL is same as the one on the ng-href and switches urls if they are not . – Kultur

This may technically work, but Chrome blocks this as a pop-up. Most users are not savvy enough to notice this and permit the site, so be wary about your user experience. – Gentleness

Answer 2

Inside your ng-click function you can call window.open(url, '_blank') however as a word of warning, this will depend on the browser and current settings.

In some cases this will open in a pop-out window and in other cases it will open in a new tab. There is no way to force either behavior as the javascript is browser agnostic, it has simply requested a new window and it is up to the browser the decide how to implement it. see here for a discussion on forcing a tab or window

However the only way to get that right-click option or the ctrl+click to open in a new tab is if the browser sees a <a> tag. Otherwise it doesn't treat it as a link.

Tunnell

Answer 3

If you want to generate your href dynamically based on some condition then you can set your href on ng-mousedown event and after that you can perform any event like open link in new tab, open link in new window and click.

HTML:

<a href="javascript:void(0)" ng-mousedown="openDetailView($event, userRole)">{{label}}</a>

JS :

  $scope.openDetailView = function (event, userRole) {
         if(userRole == 'admin') {
             jQuery(event.target).attr('href', 'admin/view');

         } else {
             jQuery(event.target).attr('href', 'user/view');

         }
  };

Kee

Answer 4

You have to use anchor element inside the table row.

HTML

<tr>
    <a ng-href="dynamic url" ng-click="openItem($event)">Open the item</a>
</tr>

Controller

$scope.openItem = function (event) {
    event.preventDefault();
    // code to open a item
}

Hudibrastic

Answer 5

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log(`HTTP Request: ${req.url}`);
    return next.handle(req);
  }
} { provide: HTTP_INTERCEPTORS, useClass: LoggingInterceptor, multi: true }

Cholecalciferol

Thank you for posting this answer. While this code may answer the question, might you please edit your post to add an explanation as to why/how it works? This can help future readers learn and apply your answer. You are also more likely to get positive feedback (upvotes) when you include an explanation. – Frost