Declare global function for navbar button


I’m building an IOnic 2 app (RC4) with several Tab pages. I need to define two simple functions for a button on the navbar: one for opening a modal (login page) and one for navigating to the user profile page. If the user is not logged in yet, the login button should be displayed, and when the user is already logged in, the profile button should be displayed.

I have declared these two functions in home.ts (which is the first tab page). And this works fine on the homepage. But now I want to have these same two buttons on the other tab pages as well.

I could duplicate these functions, but I don’t want duplicate code. And it’s not just the duplicate code: I would have to import a lot of things in every single tab page: NavController, ModalController, UserPage, ProfilePage, etc.

So I should create a shared provider, right? But I read on this forum that it’s ‘bad practice’ to put navigation in providers.

So my question is simple: where should I declare global functions for opening a modal, and navigating to a specific page.

Any help would be appreciated.


I would do that in the application component.


I have tried that. But then I get ‘function undefined’. Apparently functions that are defined in the app component are not available in the pages automatically(?). What am I doing wrong.


Create some parent class with needed methods for your pages in tabs. Then extend pages from this class.


Calling functions of one component from another. I think that’s virtually always a bad idea. Can’t you put the buttons that trigger these functions in the app component’s template, such as in a menu or toolbar?


And that’s exactly what I’m trying to avoid. The thing is, we do not have a global navbar anymore in Ionic 2, so the result of that is that functions for buttons on the navbar should be declared in the component (which results in a lot of duplicate code) or in a provider (which apparently is bad practice).

For now I have created a small provider with just a ModalCtrl and the AppCtrl (so I can use setroot). I removed the NavCtrl and this seems to work now.

It still seems odd that there is no better way to do this.


Why doesn’t a toolbar do what you want? The conference app has one in its application component template.


The toolbar that is defined in the app component of the Conference App is not used in the header of the app, but in the sidemenu as a menu title. So that’s not going to help me.

And that’s exactly my point: we can define global navigation functions for the sidemenu and in the tabs, but not for the header.

@mhartington has pointed out several times that you cannot create a global navbar in Ionic 2, and I get that. (see:

So my question still remains: where do I put navigation functions (modal, push, setroot) for a button on the navbar: duplicate them in the page components, or put them in a shared provider?


I have faced also this situation , that you do not want to duplicate for each page a similar function.
first I have tried to use Provider , they are really useful and you can write the main functions and code there.
then you can call the function name in each page and it works fine.
but still it had two problems for this case
1- I could not access the menu in a provider
2- I was lazier than to add each time to each typescript page a calling method from a provider ( which should be imported and defined as public in constructor )
So I solved the issue by Creating a Directive ( Menu-Presenter ) so once I had created the directive, it just needed to add menu-presenter directive to a button tag.

`        <button menu-presenter>
             <ion-icon name='menu' ></ion-icon>

the same strategy you can do for login page and other modals