How can i change a header title in app.html based on data from a page class?


#1

In app.html i’ve have a header bar which i want to show on all pages.
However the value of the ion-title i want to change based on the data of the page.
In ionic 2 is there equivalent like the jquery syntax $(‘ion-title’).html(‘PageTitle’) ?

header in app.html

   <ion-header><ion-nav-bar>
    <ion-toolbar primary>
      <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    
    </button>
      
      <ion-title>Apptitle</ion-title>
      <ion-buttons end>
        <button (click)="goSearch()">  <ion-icon name="search"></ion-icon></button>
      </ion-buttons>

    </ion-toolbar>
  </ion-nav-bar>
</ion-header>

Is it possible to change an element in app.html based on data retrieved in de page class?

Regards
Sivard


#2

For now i “fixed” this problem by implementing a page-base.ts and extend every page class on this class. But i know this is not the best solution. I also tried to implement this ion-header inside an directive but i could get the navcontroller to work in the directive code. Any thoughts on how to solve this better?

Thanx
Sivard

The code for the basepage.

import { Component, ViewChild } from '@angular/core';
import {NavParams, LoadingController, NavController } from 'ionic-angular';
import {WordPressService} from '../providers/word-press-service/word-press-service';
import {GlobalVars} from '../providers/global-vars/global-vars';

export class BasePage {
    public wpdata: any;
    public pageTitle: string;
    public searchPage: any;

    constructor(
        public wordpressService: WordPressService,
        public loadingCtrl: LoadingController,
        public globalvars: GlobalVars,
        public navCtrl: NavController
    ) {
        this.pageTitle = "Welcome";
    }


    public loadPage(id: number,
        type: string,
        pagename: string) {
        console.log('loadPage : ' + pagename + ',' + id + ',' + type);
        this.wordpressService.loadPage(pagename, id, type)
            .then(content => {
                console.log('html loaded : ' + JSON.stringify(content));
                this.wpdata = content;
                this.pageTitle = this.wpdata.title != null ? this.wpdata.title.rendered : pagename;

            });
    };
    
    public goSearch() {
        if (this.searchPage) {
            this.navCtrl.push(this.searchPage);
        }

    }

}

The page.ts code

import {Component, ViewChild, Directive} from '@angular/core';
import {Config, NavParams, NavController, LoadingController } from 'ionic-angular';
import {WordPressService} from '../../providers/word-press-service/word-press-service';
import {GlobalVars} from '../../providers/global-vars/global-vars';
import {BasePage} from '../../config/page-base';
// import {MenuHeader} from '../../components/header/header';
import {SearchPage} from '../search/search';
/*
  Generated class for the PagePage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/


@Component({
  templateUrl: 'build/pages/page/page.html',
  providers: [WordPressService, GlobalVars],
  // directives: [MenuHeader]
})
export class PagePage extends BasePage {
 
  constructor(
    public wordpressService: WordPressService,
    public loadingCtrl: LoadingController,
    public nav: NavController,
    public globalvars: GlobalVars,
    private navParams: NavParams

  ) {
    super(wordpressService, loadingCtrl, globalvars, nav);
    this.searchPage = SearchPage;
    this.loadPage(
      this.navParams.get('id'),
      this.navParams.get('type'),
      'page'
    );

  }
}

the page.html look now like this.

<ion-header>
  <ion-nav-bar>
    <ion-toolbar primary>
      <button menuToggle>
      <ion-icon name="menu"></ion-icon>
    
    </button>

      <ion-title>{{pageTitle}}</ion-title>
      <ion-buttons end>
        <button (click)="goSearch()">  <ion-icon name="search"></ion-icon></button>
      </ion-buttons>

    </ion-toolbar>
  </ion-nav-bar>

</ion-header>

<ion-content class="has-header">
  
<div *ngIf="wpdata" [innerHTML]="wpdata.postmeta.mobile_content">
  loading....
</div>
<p></p>
</ion-content>

#3

Did you try to use event subscribe and publish method?

You can store apptitle in local storage and keep updating the value based on your views along with publishing events.