How can i add global scope function for ionic2

I’ve tried to make common component for ion-navbar, but i found answer that is not possible.

However, I still need to common function for navigating to Home page - Home button

and search function for my header searchbar

Can Anyone tell me How to create global function? Any answer would be really appreciated :slight_smile: .

Hey AllaBunny,

sure u can add a component in navbar (afaik). Otherwise use the pages component?

I tried but failed…
And found answer that is not possible…
What i want to know is that Global function for my nav bar …

I have the exact same question. I was told here (Ionic 2 global navbar component) that building a navbar component was not correct, but another Ionic team member showed an example using a custom navbar component. Hoping for some resolution on this.

Please describe in a more detailed way what exactly you are trying to achieve. I guess a global navbar for all pages would lead to many problems. Probably you can do (whatever it is, that you want) in a nicer way.

Do you want to simplify your markup / have a button always on the same position in your navbar / …?

@CanKattw I am fine with replicating navbar markup, as I like the ability to control the look of my navbar on each page. However, I’d prefer if I do not have to replicate the TypeScript functions that are executed when one of my navbar buttons are clicked. If I can create a global scope function, then I can call that same function to set the root of my page whenever I need to navigate to a particular page. That way, if I need to change where a button on my navbar navigates to, I don’t need to change the function on every single page of my application.

Most of the stuff that happens in the navbar should be content related and NOT global. An exception might be a popover based navigation. (e.g WhatsApp on Android, upper right corner of navbar). The proper way to do so is to create a component which you embed on all navbars.

My navbar will always have same button
home button, searchbar, sidemenu button

I’m also okay with same code writing for header markup part but I still doubt that i have to write simple function like goHomePage() on every single page which has navbar…

I am trying to avoid creating same function on every page…

Move more and more logic to components. The mentioned search is a good use case. It should be a simple component. If it is a search for the content below, add an @Output that you utilize in your ion-contents -> ion-list’s *ngFor as filter. Same applies for the go home button. This should be a component. So you will do have some redundant markup but the TypeScript code is only written once.

@CanKattw That’s a good suggestion. Is making each button in the navbar a component like this standard practice in Ionic 2?

It depends. If it appears multiple times in your application then yes. If it is a single button with a individual function just write it into your navbar.

if it is like a complexe element that is used multiple times but always triggers different code, then do a component that emits and event which then leads to the actual code execution.

@CanKattw That makes sense, thanks

If you are unsure whether to do a component or not, simply use this thread to ask and mention me. I think the “component-thing” might be new to many devs. But it gets really really cool if you get used to it, especially in larger applications!

1 Like

Thank You for your answer! :smile:

Well, global function isn’t the only way to DRY, typescript seems to offer something https://www.typescriptlang.org/docs/handbook/mixins.html If this thing works I think it’s even a better approach, in the sense that you wouldn’t have to define anything global which is pretty much a leak from your encapsulation of the header component.