Angular navigate to external url in new tab

To navigate to an external URL in a new tab from an Angular application, you can use the window.open() method or the target attribute on an anchor tag.

Here are a few examples:

Using window.open()

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: '<button (click)="navigateToExternalUrl()">Navigate to external URL</button>'
})
export class ExampleComponent {
  navigateToExternalUrl() {
    window.open('https://www.example.com', '_blank');
  }
}

In this example, when the button is clicked, the navigateToExternalUrl() method is called, which opens the external URL https://www.example.com in a new tab using window.open().

Using the target attribute on an anchor tag

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: '<a [href]="externalUrl" target="_blank">Navigate to external URL</a>'
})
export class ExampleComponent {
  externalUrl = 'https://www.example.com';
}

In this example, the target attribute on the anchor tag is set to _blank, which tells the browser to open the linked URL in a new tab.

Using the Router module (Angular 2+ only)

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-example',
  template: '<button (click)="navigateToExternalUrl()">Navigate to external URL</button>'
})
export class ExampleComponent {
  constructor(private router: Router) { }

  navigateToExternalUrl() {
    this.router.navigate(['https://www.example.com'], { external: true });
  }
}

In this example, the Router module is used to navigate to the external URL. The external option is set to true to indicate that the navigation should occur in a new tab.

Note that in all cases, you should ensure that the external URL is properly formatted and that the browser is configured to allow pop-ups.