How to open a link in new tab on right click - html

I have the below code
<a href="/program/2" (click)="onSelect(2)" >{{"2"}}</a>
The problem with this solution is that when I click, the function works, but href also is activated.
What i want to do is that when i click the method is called and the href is not called.
When i tried right click and choose "open new Tab" then the href is activated, and the method isn't closed.
Usually, I could solve this problem by using [routerLink] as it allows me to open the function and it will also allow new-tab on right-click.
<a [routerLink]="onSelect(2)" >{{"2"}}</a>
But I can't use it as I have an exception here:
parent(ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked).
Is there any other solution that will allow me to call the function on click, and when I do right click it can go to the href="/program/2".
Note: I want the href to go to a new page (when I right-click). When I click it should remain on the same page as I am calling the parent which later adds /program/2 to the route.

define target as _blank to tag

<a [routerLink]="onSelect(2)" (contextMenu)="openExternal('/program/2')" >{{"2"}}</a>
and in your component add method:
openExternal(link) {
window.open(link, "_blank")
}

You can add a target to element, like this
{{"2"}}
with: target="_blank" the link will open in new tab and with href="javascript:;" you avoid the href get activated on click.

Related

html Button on top of link

Hey I have a div which is wrapped by a Link component, and inside that div I have more buttons, but the problem is, when I click on the inner smaller buttons, I actually click on the Link component as well, so I get redirected which is not what I want... How do I fix this?
it seems as though both the link and the button get clicked but if i am intending to click the button only i want to avoid the parent link.
What I mean is, the Link is used to navigate to some URL when you click on it. Putting elements inside that for other tasks. like a blog post, you click on the parent it will redirect you, but on the child the button will allow you to delete it
was coding this in nodejs react so i was using onClick events
example
<Link to="/blog-post">
<div className="link-post-container">
...blog
<button className='deleteButton'></button>
</div>
</Link>
I have tried event.stopPropagation on the button but it still doesn't seem to do anything. Is it because the Link is an href instead of a onClick?
SOLUTION
so using some of the possible solutions below i started messing around and noticed by in the onClick of the deleteButton, if i add the following in, it works:
event.preventDefault()
with this, the redirect because of the href does not occur anymore and only the button click event will take place
const handleClick = event => {
event.stopPropagation()
// then write rest of your onclick code
}
<button className='deleteButton' onClick={handleClick}></button>
The click event propagates from the button upwards in the DOM tree until it reaches the root (simplified explanation - you can learn more about event propagation here). This is why the link also registers it and runs its onclick handler, redirecting you to another site.
You can call event.stopPropagation() inside your button's onClick handler to stop the event from reaching the encapsulating link.
source

How to open `<li>` elements in new tab using query Parameters in Activated Route in Angular

I am having a list of elements say
<li [class.active_view]="Display('A')" (click)="Az()">A</li>
<li [class.active_view]="Display('B')" (click)="Bz()">B</li>
<li [class.active_view]="Display('C')" (click)="Cz()">C</li>
Currently whenever a user clicks on any of the tab I use
this.activatedroute.queryParams.subscribe(query => {
//some_code_to_set_url
});
and then I use this url to navigate to that.
But using <li> I am unable to enable Open in New Tab option on right click. Is there a way to achieve it using <li> tag.(I tried using href but it breaks url and replaces many symbols like ? with %3F etc). How to open it in new tab and enable it on right click.
That option is only available if you are using <a> tags. That's why they are there for. Also, this is semantically incorrect. Say, screen readers and other software that merely go by code, will not be able to access those as links.
Also, to make them open in new tabs, either:
Change them to <a> and give target="_blank".
Use window.open() function to open the URL.
In Angular JS, the window.open can be invoked using $window service:
.controller('exampleCtrl', ['$scope', '$window',
function($scope, $window) {
$scope.redirectToGoogle = function(){
$window.open('https://www.google.com', '_blank');
};
}
]);
Reference: Open a new tab on button click in AngularJS
I think you always can use a work-around (I don't check the code, but my idea is)
in your component
<li [class.active_view]="Display('A')" (click)="Az(newpage)">A</li>
<form #newpage [action]="url" target="_blank">
Your function Az
Az(form:any)
{
this.url="google";
form.submit();
}

Opening link in new tab without moving away from the active tab (and without taking user to the new tab) in HTML <a> tag

When I use <a href="some url" target="_blank"> and when the user clicks the corresponding link, new tab opens and the user is directed to the new tab.
I want that new tab should open but user should remain on the previous tab only. In other words I want to emulate the Ctrl+click (or Cmd+click in Mac) behaviour.
Are there any such values for target attribute or are there any other attribute which can set such property to the links (<a ...>)?
Try this
<a href="www.stackoverflow.com" onclick="window.open('#','_blank');window.open(this.href,'_self');">
linktext
</a>

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

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!
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.
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.
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:
{{label}}
JS :
$scope.openDetailView = function (event, userRole) {
if(userRole == 'admin') {
jQuery(event.target).attr('href', 'admin/view');
} else {
jQuery(event.target).attr('href', 'user/view');
}
};
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
}

Is there another way to link on same page

I have a link which opens a table on the same page if user clicks on the link. What I want to know is that is there another way to link on the same page rather than doing this:
[Open Grid]
This is because in the url it displays # at the end of the url so I want to know is there another way to link on the same page than href="#".
Thanks
Why even use an <a> tag if you are just binding an event handler to the element. Just use a <span> and style it. You can even give it cursor:pointer if you want that link feel/look
just return false in javascript and the link will not be followed when clicked, but you can still open your tables using js, as i suspect you do right now
as I understand you alread have some function binded to the click event of this link, right? if so you can just use href="javascript:void(0)", this way is much better, because in this case browser doesn't add a context menu items such as "Open link in new tab" or "Copy link address" to this link.
If you're using Javascript to detect when an element is clicked, you don't have to use tha anchor tag, or the href attribute.
You could do <a id="showGrid">Open Grid</a> and then something like $('a#showGrid').click(...); if using jQuery. To get the "link cursor" you can do a {cursor: pointer} in CSS. It'll look the same, but you won't get that # in the browser's address bar.