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    lt button  click   onNavigate    gt Google lt  tn-submenu-link gt    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

User · Answer

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.

User · Answer

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    lt a href    location    target   blank  gt Redirect Location lt  a gt    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

User · Answer

Another possible solution is   const link   document createElement  a    link target     blank   link href    https   www google es   link setAttribute  visibility    hidden    link click

User · Answer

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

User · Answer

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     lt any gt event currentTarget  getAttribute  href         if  url  amp  amp  url indexOf  http       -1          url        url               window open url    blank            then it s as simple as using it like this    lt a  href   url  hrefExternalUrl gt  Link  lt  a gt    and don t forget to declare the directive in your module

User · Answer

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

User · Answer

onNavigate        window open  https   www google com     blank

User · Answer

we can use target   blank to open in new tab    lt a href  https   www google co in   target  blank  gt click Here  lt  a gt

User · Answer

in HTML     lt a class  main-item   click   onNavigate    gt Go to URL lt  a gt    OR   lt button class  main-item   click   onNavigate    gt Go to URL lt  button gt    in TS file   onNavigate           your logic here     like set the url      const url    https   www google com       window open url    blank

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

Examples related to angular

Examples related to typescript