Open link in new tab not opening in new tab when using navigate in angular

Question

In HTML page

<h2 class="entry-title"><a href="javascript:void(0)" (click)="moreInfo(fashion)">{{fashion.postName}}</a></h2>

In Component.ts

moreInfo(data) {
    this.router.navigate(['/blog-info/', data.postName]);
  }

Does this answer your question? [How to open link in new tab in angular 5](https://stackoverflow.com/questions/52240123/how-to-open-link-in-new-tab-in-angular-5) — Edric, May 16 '20 at 11:10
No, because in that question user is using [routerLink] in html page. But I'm using this.router.navigate from component. — shivlal kumavat, May 16 '20 at 11:14
Yes, but `Router#navigate` is equivalent to the `routerLink` attribute. — Edric, May 16 '20 at 11:15
Correct, but when I'm clicking on link it will call the```moreInfo()``` then it will navigate but When right click on link and want to open in new tab that time not working. — shivlal kumavat, May 16 '20 at 11:18
It's because you're using a click listener... It's not the same as using the `href` attribute. — Edric, May 16 '20 at 11:20
Yes, So any solution for this or we have to use like that question? — shivlal kumavat, May 16 '20 at 11:22
In routerLink we are passing the value that is the URL but by using navigate I'm replacing the some name for URL Like this ```this.router.navigate(['/blog-info/', (data.postName.replace(/\s/g, '-')) + '-' + data._id]);``` — shivlal kumavat, May 16 '20 at 11:25
Yes, routerLink work but As I told I want to change some URL info — shivlal kumavat, May 16 '20 at 11:27
Every modification you do here you could simply make it inside routerlink [routerlink]="['blog-info', data.postName.replace(...)]" — onik, May 16 '20 at 12:49

score 0 · Answer 1 · answered May 16 '20 at 10:57

0

you need to add target attribute in your HTML

<h2 class="entry-title"><a target="_blank" href="javascript:void(0)" (click)="moreInfo(fashion)">your template expression</a></h2>

answered May 16 '20 at 10:57

Jasdeep Singh

This giving me in URL when right click for open in new tab about:blank#blocked – shivlal kumavat May 16 '20 at 10:58
about:blank#blocked – shivlal kumavat May 16 '20 at 10:59
Why are not you using window.open(link, '_blank'); – Jasdeep Singh May 16 '20 at 11:01
Agree, but I don't want to open every time in new tab, Like if user want to open in new tab then only. – shivlal kumavat May 16 '20 at 11:05
How do you differentiate when user want to open in a new tab or not? – Jasdeep Singh May 16 '20 at 11:07
It's simple when use right click on link and select Open link in new tab. – shivlal kumavat May 16 '20 at 11:08
for example in the site, if you right click on post it will open in new tab other wise open in same page. https://levelup.gitconnected.com/ – shivlal kumavat May 16 '20 at 11:10
Don't you think it is by default behavior, – Jasdeep Singh May 16 '20 at 11:13
When we are calling function that time we are using javascript:void(0) because of this not working. – shivlal kumavat May 16 '20 at 11:21

score 0 · Answer 2 · answered May 16 '20 at 11:36

If you want to do it, you should have href attribute. So, routerLink is a good choice. other way:

<h2 class="entry-title"><a href="/blog-info/{{fashion.postName}}" (click)="moreInfo($event, fashion)">{{fashion.postName}}</a></h2>

moreInfo(event, data) {
    event.preventDefault();
    this.router.navigate(['/blog-info/', data.postName]);
}

score 0 · Accepted Answer · answered May 16 '20 at 12:59

0

Call function in routerLink. create function in component:

moreInfo(data) {
     return  data.postName.replace(/\s/g, '-') + '-' + data._id;
  }

Use like this in routerLink:

[routerLink]="['/blog-info', moreInfo(fashion)]"

answered May 16 '20 at 12:59

shivlal kumavat

3 Answers3