Search code examples
angularservicedom-eventsangular2-changedetectionng-template

Angular new tab navigation


I have created two components and a service being used by both of them. I want one component to be rendered by default and from within that component a link that will open the other component on new tab without changing the url (no routing).

one.component.html <ng-template #one>

This is the default component and contains the link to open another component in a seperate tab but with same url.
<a (click)="openNewTab()"></a>

one.component.ts

// xyz code
window.open('/', '_blank').focus()

two.component.html

<ng-template #two>
This should be opened in a seperate tab 
</ng-template>

Solution

  • You must have to pass full URL path of your second component, into your window.open('/', '_blank').focus() method.

    • Currently you're just passing single / that means it won't redirect to the specific path of your second component.
    • Try changing URL like this, window.open('localhost:4000/secondURL', '_blank').focus()

    Where secondURL is URL of your second component.