How to open a link in new tab using angular?

Question

I have an angular 5 component that needs to open a link in new tab, I tried the following:

<a href="www.example.com" target="_blank">page link</a>

when I open the link, the application gets slow and opens a route like:

localhost:4200/www.example.com

My question is: What is the correct way to do this in angular?

4

This works for me `page link` – MkMan Sep 09 '18 at 10:01

score 282 · Answer 1 · edited May 30 '23 at 08:01

282

Use window.open(). It's pretty straightforward !

In your component.html file:

<a (click)="goToLink('www.example.com')">page link</a>

You may have to add the http prefix if it doesn't redirect correctly:

<a (click)="goToLink('http://www.example.com')">page link</a>

In your component.ts file:

goToLink(url: string){
    window.open(url, "_blank");
}

edited May 30 '23 at 08:01

Powkachu

2,170
2
26
36

answered Sep 09 '18 at 04:42

Harun Or Rashid

5,589
1
19
21

Can someone point out a way of doing this where the string within the goToLink function isn't a 'magic string'? For instance, through a variable? – Highspeed Jul 07 '19 at 23:05
@BrianAllanWest I would just set a variable in the corresponding component file and leave the parameter out in the html. If this doesn't work, just bind it to the template using the default binding property [ ] and then you can run whatever logic you want on that. .html goToLink() .ts goToLink() { window.open(Your Variable Here, "_blank") } – thenolin Jul 29 '19 at 16:42
How can I let it be in a small popup window, and listen to changes in its URL. – Mostafa Al Belliehy Nov 03 '19 at 08:32
I would add a `href=''`, so it stills looks clickable – Leonardo Rick Aug 31 '20 at 23:37
May use without *_blank*. By default, a new tab opens. – Yury Matatov Sep 05 '20 at 10:10

score 79 · Answer 2 · edited Sep 09 '18 at 03:02

79

just use the full url as href like this:

<a href="https://www.example.com/" target="_blank">page link</a>

edited Sep 09 '18 at 03:02

Lux

17,835
5
43
73

answered Sep 08 '18 at 23:25

zhimin

2,740
12
22

3

this is the simplest way. – Wayne Wei Mar 10 '21 at 16:43
Appreciate this answer. Clean and simple. – Carlo Nyte Jun 10 '22 at 04:05

score 36 · Answer 3 · answered May 07 '20 at 15:50

36

I have just discovered an alternative way of opening a new tab with the Router.

On your template,

<a (click)="openNewTab()" >page link</a>

And on your component.ts, you can use serializeUrl to convert the route into a string, which can be used with window.open()

openNewTab() {
  const url = this.router.serializeUrl(
    this.router.createUrlTree(['/example'])
  );

  window.open(url, '_blank');
}

answered May 07 '20 at 15:50

wentjun

40,384
10
95
107

2

Very nice and handy in some cases. Just what I needed. – TheViking Nov 17 '21 at 11:11
where do you get the router in this.router from? Like what is the import for router? Or is it angular core? – Naga Apr 28 '22 at 04:56

score 35 · Answer 4 · answered Mar 09 '20 at 16:44

35

Just add target="_blank" to the

<a mat-raised-button target="_blank" [routerLink]="['/find-post/post', post.postID]"
    class="theme-btn bg-grey white-text mx-2 mb-2">
    Open in New Window
</a>

answered Mar 09 '20 at 16:44

C.Ikongo

1,706
1
16
15

2

Literally just this, best answer – Hutch Moore Mar 02 '21 at 23:24

score 22 · Answer 5 · edited Sep 16 '20 at 09:29

22

<a [routerLink]="" (click)="openSite(SiteUrl)">{{SiteUrl}}</a>

and in your Component.ts

openSite(siteUrl) {
   window.open("//" + siteUrl, '_blank');
}

edited Sep 16 '20 at 09:29

Liam

27,717
28
128
190

answered Jun 24 '20 at 06:18

John Anthony Romualdo

237
2
2

1

If using "//" + siteUrl then https:// or http:// should be committed in the siteUrl, maybe that was causing the issue for you @Nicolas – Boštjan Pišler Dec 17 '20 at 23:57
Here is other example bassed in your code. `downloadFile(){ const filePath = 'assets/files'; const fileName = '/myfile.xlsx'; const url = `${filePath}${fileName}`; window.open(url, '_blank'); }` – C Alonso C Ortega Feb 12 '21 at 17:14
From an accessibility standpoint should never have to add click to tag, should ALWAYS have an href attribute, buttons and links are not the same, both can be completely styled with CSS since IE9 which has long been retired... it's 2021 people – PDA Aug 20 '21 at 17:23

score 17 · Answer 6 · answered Oct 04 '20 at 19:24

17

Some browser may block popup created by window.open(url, "_blank");. An alternative is to create a link and click on it.

...

  constructor(@Inject(DOCUMENT) private document: Document) {}
...

  openNewWindow(): void {
    const link = this.document.createElement('a');
    link.target = '_blank';
    link.href = 'http://www.your-url.com';
    link.click();
    link.remove();
  }

answered Oct 04 '20 at 19:24

Morlo Mbakop

3,518
20
21

2

best answer. Safe and clean – Rafael de Castro Dec 03 '21 at 19:56

score 13 · Answer 7 · edited Aug 22 '19 at 17:58

13

In the app-routing.modules.ts file:

{
    path: 'hero/:id', component: HeroComponent
}

In the component.html file:

target="_blank" [routerLink]="['/hero', '/sachin']"

edited Aug 22 '19 at 17:58

Laurenz Albe

209,280
17
206
263

answered Aug 22 '19 at 17:38

Femina

141
1
5

score 5 · Answer 8 · edited Feb 17 '20 at 14:26

5

Try this:

 window.open(this.url+'/create-account')

No need to use '_blank'. window.open by default opens a link in a new tab.

edited Feb 17 '20 at 14:26

a_hardin

4,991
4
32
40

answered Sep 04 '19 at 10:40

DINESH Adhikari

1,242
1
12
11

1

Why should he try that? What does that do? – Andreas Sep 05 '19 at 02:47
2

this is the answer of this question "How to open link in new tab in angular 5" window.open by default open link in new tab – DINESH Adhikari Sep 05 '19 at 06:33

score 2 · Answer 9 · edited Aug 18 '21 at 12:02

2

u can add https in your code and it works for me

goToLink(url: string) {
    window.open('https://' + url, "_blank");
}

edited Aug 18 '21 at 12:02

Tobias S.

21,159
4
27
45

answered Aug 18 '21 at 04:49

haga ginting

29
1

score 1 · Answer 10 · answered Dec 02 '20 at 23:46

1

you can try binding property whit route

in your component.ts user:any = 'linkABC';

in your component.html <a target="_blank" href="yourtab/{{user}}">new tab </a>

answered Dec 02 '20 at 23:46

jdcreativemaker

131
1
3

How to open a link in new tab using angular?

10 Answers10

Linked