Shared component accross many pages with parameters

Ionic Framework ionic-v3
1

Hi all,
I’m new to Ionic and starting with Ionic 2, coming from Sencha Touch world.
My first attempt to build an Ionic 2 app is really amazing.
However, I’m facing a difficulty about components.

I want to share a common component accross many pages, with one parameter, but I can’t make it work.

What I need is building a simple navbar with one parameter : page title.

However, I can’t update the “pagetitle” parameter from each page where the navbar component is added.
Here is the code I tried:

Navbar component:

navBarStandard.html

  <ion-navbar *navbar class="navBarStandard" colorNavBar>

	<!-- Menu button -->
	<button menuToggle>
		<ion-icon name="menu"></ion-icon>
	</button>
	
  <ion-title>{{pageTitle}}</ion-title>
	
	<ion-buttons end>
    <button (click)="fnc()">
			<ion-icon name="ios-list"></ion-icon>
		</button>
  </ion-buttons>
	
</ion-navbar>

navBarStandard.ts

import { Component } from '@angular/core';

@Component({
  selector: 'navBarStandard',
  templateUrl: 'build/components/navBarStandard/navBarStandard.html'
})
export class NavBarStandard {

  pageTitle: string;

  constructor() {
		this.pageTitle = "Title";
  }
	
}

A page where I want to insert the navBarStandard component:

page.html

<navBarStandard></navBarStandard>
...

page.ts

import { Component } 			from '@angular/core';
import { NavController } 	from 'ionic-angular';
import { NavBarStandard } from '../../components/navBarStandard/navBarStandard';

@Component({
  templateUrl: 'build/pages/page/page.html',
	directives:  [ NavBarStandard ]
})

export class Page{
	
  constructor(private nav: NavController) {
		NavBarStandard.pageTitle = "Page title";
	}
	
}

The problem is that in the navbar, “title” is always displayed, and I can not update it with “Page title” when “page” is opened.

What am I doing wrong?

2

The problem described in your title is a little different from the problem in the specific example. I think I can help you solve the specific problem using an <ion-menu>.

(You could do the same with <ion-tabs>, if you prefer. Whichever one you pick becomes your navigation controller.)

The outermost element for the pages you control with it will be an <ion-content> area that gets swapped out by the controller. You can define each internal page in the outer nav-controller’s typescript file with whatever parameters you like, and that way you can dynamically change the title.

Here’s what it might look like, using an ion-menu plus your code as a starting point.

navBarStandard.html

<!-- optionally wrap your navbar in a header -->
<ion-header>
  <ion-navbar *navbar class="navBarStandard" colorNavBar>
    <!-- Menu button -->
    <button menuToggle><ion-icon name="menu"></ion-icon></button>
    <ion-title>{{ this.pageTitle }}</ion-title>
  </ion-navbar>
</ion-header>

<!-- this will be your side menu, the navController -->
<ion-menu [content]="mycontent">
  <!-- this is the content of the menu and will list all your internal pages, by title -->
  <ion-content>
    <ion-item *ngFor="let p of pagesArray" (click)="showRoot(p)">{{ p.title }}</ion-item>
  </ion-content>
<ion-menu>

<!-- this is the nav you will control with your navController -->
<ion-nav #mycontent [root]="rootPage">
  <!-- don't put anything in here. This will show the <ion-content> of internal pages. -->
</ion-nav>

navBarStandard.ts

import { Component, ViewChild } from '@angular/core';
import { App, Platform, Nav, NavController } from 'ionic-angular';
import { InnerPageOne } from '../inner-page-one/inner-page-one';
import { InnerPageTwo } from '../inner-page-two/inner-page-two';

@Component({
  selector: 'navBarStandard',
  templateUrl: 'build/components/navBarStandard/navBarStandard.html'
})
export class NavBarStandard {
  @ViewChild(Nav) nav: Nav;

  rootPage = InnerPageOne;
  pageTitle: string;
  pagesArray: Array<{title: string, component: any}>;

  constructor( public app: App, public platform: Platform, public navController: NavController ) {
    this.pageTitle = "Title";
    this.pagesArray = [
      { title: 'Page One Title', component: InnerPageOne },
      { title: 'Page Two Title', component: InnerPageTwo }
    ];
  }

  showRoot(page) {
    this.nav.setRoot(page.component);
    this.pageTitle = page.title;
  } 	
}

innerPageOne.html

<!-- outer element must be ion-content -->
<ion-content>
  <!-- content goes here ...  -->
</ion-content>

If you define the title and component for every internal page in your navBarStandard.ts pagesArray, you shouldn’t need to include the following in your internal pages:
directives: [NavBarStandard]
this.pageTitle

The problem described in your title has more to do with Angular directives, or maybe view partials. That is another matter, entirely.

Hopefully, this will fix the problem described in the code sample provided.