CODEWITHSUNDEEP
ionic-frameworkionic2
Bas van Dijk
Bas van Dijk

Reputation: 10713

How can I change ion-title programmatically in Ionic2

In my Ionic2 project I have tabbed view with three tabs:

tabs.ts

<ion-navbar *navbar>
    <ion-title>My tab parent title</ion-title>
</ion-navbar>

<ion-tabs>
    <ion-tab [root]="tab1Root" tabIcon="people"></ion-tab>
    <ion-tab [root]="tab2Root" tabIcon="person"></ion-tab>
    <ion-tab [root]="tab3Root" tabIcon="globe"></ion-tab>
</ion-tabs>

Does anyone know how I can programmatically change the ion-title of this page from one of the child tabs?

Upvotes: 2

Views: 6165

Answers (5)

Sensei James
Sensei James

Reputation: 2695

The other answers are good answers, and thought-provoking, but the official recommended way to set the document title in Ionic is to use Angular's Title Component:

In app.module:

import { Title }  from '@angular/platform-browser';

@NgModule({
...
  providers: [
    Title
  ],

Somewhere else:

import { Title }     from '@angular/platform-browser';

export class SomeComponent {
  public constructor(private titleService: Title ) { }

  public someMethod(){
    this.titleService.setTitle ('An Awesome Title');  
  }

Reference: https://angular.io/guide/set-document-title

Please note that @LeRoy's answer is technically correct! I.e. per Ionic's official docs it should totally work! And it used to! But it doesn't anymore! And what's more is app.setTitle (not working) is a known issue in Ionic 2+ that will ONLY be fixed in the next major release of the framework (v4).

Upvotes: 2

Paul
Paul

Reputation: 680

I did it this way:

<ion-header>
  <ion-navbar>
    <ion-title>{{title}}</ion-title>
  </ion-navbar>
</ion-header>
<ion-tabs>
  <ion-tab [root]="tabLogin" tabTitle="Login" tabIcon="log-in" (ionSelect)="this.title ='Login'"></ion-tab>
  <ion-tab [root]="tabSignup" tabTitle="Sign up" tabIcon="add-circle" (ionSelect)="this.title ='Sign up'"></ion-tab>
</ion-tabs>

Upvotes: 8

LeRoy
LeRoy

Reputation: 4446

Import app and add it as a constructor

import { App } from 'ionic-angular';

 constructor(private app: App ) { }

then add event handler on enter page

  ionViewDidEnter() {
    this.app.setTitle('people');
  }

Upvotes: 2

Manu Vald&#233;s
Manu Vald&#233;s

Reputation: 2372

see my answer here on how to use a provider to share data between different pages: in your tabs template use a variable that you store in the provider <ion-title>{{globalService.titleName}}</ion-title> , and in your tab pages just modify the value of globalService.titleName

Using a provider to hold global data is working for me in Ionic 2 beta 6, and I believe it is the recommended practice in Angular 2.

Generate a provider from the command line: ionic g provider GlobalService Notice how the generated service is decorated with @Injectable

Inject your service in the @App class; you do this by declaring it in the providers array: 

  @App({
        templateUrl: 'build/app.html',
              providers: [GlobalService] ,
              config: {} // http://ionicframework.com/docs/v2/api/config/Config/
            })

This will create an single instance of your provider that is accesible on every page. Wherever you need to use it, do not declare in the providers array, but on the constructor of the Page:

@Page({
        templateUrl: 'build/pages/new-page/new-page.html',
      })
      export class NewPage{

       constructor(public globalService: GlobalService) {
    }

    someFunction(){
    this.globalService.someGlobalFunction();
    }

Upvotes: 2

Aaron Saunders
Aaron Saunders

Reputation: 33345

http://ionicframework.com/docs/v2/components/#tabs

have you tried to just create the ion-navbar in the specific page

@Page({
  template: `
    <ion-navbar *navbar>
      <ion-title>Heart</ion-title>
    </ion-navbar>
    <ion-content>Tab 1</ion-content>`
})
class Tab1 {}

Upvotes: 0

Related Questions