Update ion-navbar title


#1

Hi,

My app has 2 pages before going to a page with tabs. To be able to keep the navigation active (back button), I put my tabs inside an ion-content and I have an ion-navbar like below:

tabs.html

<ion-navbar *navbar primary>
  <ion-title>
    Title {{ _id }}
  </ion-title>
</ion-navbar>

<ion-content>
  <ion-tabs>
    <ion-tab tabTitle="Tab1" [root]="_tab1"></ion-tab>
    <ion-tab tabTitle="Tab2" [root]="_tab2"></ion-tab>
    <ion-tab tabTitle="Tab3" [root]="_tab3"></ion-tab>
    <ion-tab tabTitle="Tab4" [root]="_tab4"></ion-tab>
  </ion-tabs>
</ion-content>

Now, I want to know how can I update my ion-title if something happens inside one of the tabs? Like you know, each tab has its own ion-content, but no ion-navbar. The ion-navbar is unique for each of them and it is located in my tabs.html.

Don’t forget, I don’t want to change my root page because I want to be able to come back from my tabs page.

Thanks


#2

If you don’t get any better suggestions, you could make a singleton title-holding service, inject it in the component that manages the tabs, and read it from there in the navbar. Then also inject it in each tab that wants to change the title, and have them call setTitle as desired.