Angular 2 - Redirect to an external URL and open in a new tab

Question

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("https://www.google.com");
        window.location.href="https://www.google.com";
    }

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

If you can narrow it down to using Javascript, this should be a javascript question, not Angular2. Can you apply this solution http://stackoverflow.com/questions/19851782/how-to-open-a-url-in-a-new-tab-using-javascript-or-jquery ? — Harry Ninh, Mar 13 '17 at 23:06
@HarryNinh Angular 2 and 4 do not expose the `window` object inside a component (while you can get-away with using the `window` global, it's preferred to perform platform-specific tasks (like using the `window` object, which differs between browsers) using an Angular Service. — Dai, Oct 13 '17 at 00:49

score 157 · Answer 1 · answered Mar 13 '17 at 23:06

157

onNavigate(){
    window.open("https://www.google.com", "_blank");
}

answered Mar 13 '17 at 23:06

Martin Ocando

1,758
1
10
11

10

Chrome is blocking popups when I use this method. Do you have any solution for that? – sundeepg Nov 06 '17 at 10:21
3

@sunnyiitkgp `window.open()` must be called within a callback which is triggered by a user action (example onclick). – gokcand Jan 15 '18 at 11:35
2

@gokcand it is obvious, but it doesn't change the situation cause still is blocked as mentioned above. – mpro Feb 26 '19 at 09:00
Nothing beats good old vanilla javascript :) – Enrico Aug 23 '21 at 16:40

score 40 · Answer 2 · answered May 31 '17 at 00:40

40

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 += 'http://';
}

url += this.urlToOpen;
window.open(url, '_blank');

answered May 31 '17 at 00:40

SaoBiz

1,249
15
16

I've been searching on and off for this for a week. In Angular 4 this works for me as a short term solution: , when it was treated as a route before. Thanks! – aherocalledFrog Apr 05 '18 at 20:23
cant `//` suffice? eg: `window.open(``//${this.urlToOpen}``, '_blank')` – Rip3rs Mar 12 '19 at 18:18

score 18 · Answer 3 · answered Sep 23 '19 at 14:15

in HTML:

<a class="main-item" (click)="onNavigate()">Go to URL</a>

OR

<button class="main-item" (click)="onNavigate()">Go to URL</button>

in TS file:

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

score 10 · Answer 4 · answered Jan 15 '18 at 11:29

10

Another possible solution is:

const link = document.createElement('a');
link.target = '_blank';
link.href = 'https://www.google.es';
link.setAttribute('visibility', 'hidden');
link.click();

answered Jan 15 '18 at 11:29

dddenis

480
1
8
14

2

This method opens Link in new tab. " window.open(url, '_blank'); " open popup which is normally blocked by Chrome – Lokinder Singh Chauhan Jan 19 '18 at 05:28

score 6 · Answer 5 · answered Mar 02 '20 at 22:29

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.

Irrfan23 · Answer 6 · 2019-03-18T09:04:12.430

you can do like this in your typescript code

onNavigate(){
var location="https://google.com",
}

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 www.google.com without http and you are not getting redirected to the given url then add http:// to the location like this

var location = 'http://'+ www.google.com

score 5 · Answer 7 · answered Jul 28 '18 at 19:06

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.

score 4 · Answer 8 · edited Apr 02 '19 at 10:48

4

var url = "https://yourURL.com";
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

edited Apr 02 '19 at 10:48

prashanthglen

28
5

answered Apr 01 '19 at 08:59

Sarbasish Mishra

157
1
8

score 1 · Answer 9 · answered Feb 21 '18 at 14:02

1

we can use target = blank to open in new tab

 <a href="https://www.google.co.in/" target="blank">click Here </a>

answered Feb 21 '18 at 14:02

Lijo

6,498
5
49
60

Well done! This is the simplest solution. – Rob.Kachmar Apr 14 '22 at 18:48

Angular 2 - Redirect to an external URL and open in a new tab

9 Answers9

Linked