I'm trying to Open a new page when user clicks on a link. I can't use Angular 2 Router, because it doesn't have any functionalities to redirect to an external URL.

so, i'm using window.location.href="...";

html code:

<button (click)="onNavigate()">Google</tn-submenu-link>

typescript code:

onNavigate(){ //this.router.navigateByUrl(""); window.location.href=""; }

But how can I open it in a new tab? when using window.location.href ?

2

9 Answers

onNavigate(){ window.open("", "_blank");
}

4

One caveat on using window.open() is that if the url that you pass to it doesn't have http:// or https:// in front of it, angular treats it as a route.

To get around this, test if the url starts with http:// or https:// and append it if it doesn't.

let url: string = '';
if (!/^http[s]?:\/\//.test(this.urlToOpen)) { url += '
}
url += this.urlToOpen;
window.open(url, '_blank');

2

in HTML:

<a (click)="onNavigate()">Go to URL</a>

OR

<button (click)="onNavigate()">Go to URL</button>

in TS file:

onNavigate(){ // your logic here.... like set the url const url = ' window.open(url, '_blank');
}

Another possible solution is:

const link = document.createElement('a');
link.target = '_blank';
link.href = '
link.setAttribute('visibility', 'hidden');
link.click();

1

I want to share with you one more solution if you have absolute part in the URL

SharePoint solution with ${_spPageContextInfo.webAbsoluteUrl}

HTML:

<button (click)="onNavigate()">Google</button>

TypeScript:

onNavigate()
{ let link = `${_spPageContextInfo.webAbsoluteUrl}/SiteAssets/Pages/help.aspx#/help`; window.open(link, "_blank");
}

and url will be opened in new tab.

you can do like this in your typescript code

onNavigate(){
var location="",
}

In your html code add an anchor tag and pass that variable(location)

<a href="{{location}}" target="_blank">Redirect Location</a>

Suppose you have url like this without http and you are not getting redirected to the given url then add http:// to the location like this

var location = ' 

var url = "";
var win = window.open(url, '_blank'); win.opener = null; win.focus();

This will resolve the issue, here you don't need to use DomSanitizer. Its work for me

To solve this issue more globally, here is another way using a directive:

import { Directive, HostListener, ElementRef } from "@angular/core";
@Directive({ selector: "[hrefExternalUrl]"
})
export class HrefExternalUrlDirective { constructor(elementRef: ElementRef) {} @HostListener("click", ["$event"]) onClick(event: MouseEvent) { event.preventDefault(); let url: string = (<any>event.currentTarget).getAttribute("href"); if (url && url.indexOf("http") === -1) { url = `//${url}`; } window.open(url, "_blank"); }
}

then it's as simple as using it like this:

<a [href]="url" hrefExternalUrl> Link </a>

and don't forget to declare the directive in your module.

we can use target = blank to open in new tab

 <a href="" target="blank">click Here </a>

1

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy