TabNavigation with Additional Pages


Hi guys. I need some help. I am new to NativeScript but not new to mobile dev and on other platforms this seems like such a simple common task, yet I cannot find out what I am doing wrong.

All I want to do is to use an app with Tab Navigation as per the Marketplace app:

And from one of the tabs, navigate to a new full screen page. Not a modal, a new screen within the stack. From what I can gather the reason I am struggling is because there’s a page-router-outlet missing for the new page to open in, what I don’t understand is where to place this page router outlet because the app.component.html contains the outlets for the tab item views. Should there be another outlet there for the other pages that do not open within the Tabviews?

I’ve created a simple demo of what I want from the above-mentioned Tab Navigation template. On the browse page is a button and, on the button click I want to navigate to Page1. That’s all.

Here’s the source:

Your help would be greatly appreciated!


Do you want to open new page on top of tap view? If yes then you should have a router outlet in app component.


Yes exactly. I do want to open a new page over the existing TabView page. Where must I place the router outlet?