How to open a new browser tab with Angular

Victor
2 min readJan 27, 2022

Angular is a Single Page Application (SPA). With SPAs generally speaking the majority of routes utilized within the app are internal since there is only one HTML file (non-component) that exists index.html. What you’ll be learning in this short read is how to open a new browser tab with an Angular route.

How it’s done in a simple non-angular app.

A complete URL is provided to the open() method that takes is a parameter of the URL string and target type. In order for the provided URL to open use type _blank, and just as simple as that you're able to open a new tab for a non SPA route.

code snippet of opening a new tab
source: https://mircoapi.io

Opening a new tab with Angular while passing in params

Some additional lines are required and methods are needed from the Router package, but this should do the trick. The createUrlTree() appends URL segments to the current URL tree to create a new URL tree and lastly uses serializeUrl() to set the URL as type string as required by the open(url: string, type: string) method.

source: https://microapi.io

--

--