I've been doing work on an Angular component and wanted to launch a brand new window from TypeScript in response to a button click. How do you do that?

You can, of course, access window directly:

view plain print about
1window.open('https://www.google.com', '_blank');

But, that breaks the encapsulation of the Angular component. How do you access the browser window object through Angular APIs?


view plain print about
1constructor(@Inject(DOCUMENT) private document: any) {}

And from there we can access the defaultView JS API:

view plain print about
1this.document.defaultView.open('https://www.google.com', '_blank');

And now we have a way to open up a new browser window without breaking the encapsulation of our Angular components or services.