How to Open a Link in New Tab Using Angular

How to enable open link in new tab in click event in angular 12

If you mean you want to be able to open the link via the right-click menu then you need to pass routerLink to the a tag.
There is the solution: How to enable "ctrl+click" with "routerLink" in Angular

And an example:

<a routerLink="/user/bob">link to user component</a>

or

<a [routerLink]="['/user/jim']">Jim</a>

You need "a" tag because in HTML only this tag has the property to open links by HTML functionality.

Information on how to use routerLink you can find in angular routerLink docs

In your case probably you should use *ngIf make a condition to display a correct element with the correct URL.

There is an example of how to make it. Conditionally add RouterLink or other attribute directives to an element in Angular 2

If you want to replace the context menu with your function, just look at this issue:
How to handle right click event in Angular app?

Angular 8 routing component in new tab

Update your CallReports to this:

  public CallReports() {
     const url = this._router.serializeUrl(
     this._router.createUrlTree(['/callreports']));

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

How to implement open link in new tab in browser using angular?

Actually I was saving token and user details coming from server side in session storage. Session storage only works for a single tab and will expire instantly if it is tried to share with another tab. I went through this article https://medium.com/@marciomariani/sharing-sessionstorage-between-tabs-5b6f42c6348c After replacing session storage with local storage issue related to opening application in multiple tab is resolved. Thank you!!!

Angular 6 routerLink on a new tab

Here's an alternate way of doing within a component.

openCityInNewWindow(city) {
  // Converts the route into a string that can be used 
  // with the window.open() function
  const url = this.router.serializeUrl(
    this.router.createUrlTree([`/custompage/${city.id}`])
  );

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

Html will look something like

<ul *ngFor="let city of cities">
  <li (click)="openCityInNewWindow(city.id)">{{city.name}}</li>
</ul>

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

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)]"

---

Related Topics