How to extract and reuse nav bar template and logic in Ionic 2 app?

4

Having had some experience with Angular 1.x (but not Ionic 1.x), I am now trying to develop a small mobile app using Ionic 2, which is based on Angular 2.

I am familiar with URL-based routing principles such as those used in ui-router. The concept in Ionic 2 is different and is based on pushing/popping pages on top of a root page.

So far I have managed to create 2 pages (Search and Person) with a nav bar on top, and to navigate from one to the other, and back. The navbar has a button to return to the root (Search) page (because later it will be possible to navigate from a person to other pages, further away from the root page).

However I could not figure out how to extract the navbar and navbar controller in a separate file. So the markup and the button handler (goToSearch) are repeated in every page.

How can I extract the navbar template and logic so as not to repeat it ?

Bonus question (and strongly related) : Can someone explain the difference between the ion-nav in app.html and the ion-navbar in the pages ?

app.ts :

import 'es6-shim';
import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {Search} from './pages/search/search'


@App({
  templateUrl: 'build/pages/app.html',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
  rootPage: any = Search;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

app.html :

<ion-nav [root]="rootPage">
    <ion-buttons end>
        <button>
          <ion-icon name="search"></ion-icon>
        </button>
    </ion-buttons>
</ion-nav>

search.ts :

import {Page} from 'ionic-angular';
import {Nav} from 'ionic-angular';
import {Person} from '../person/person'

@Page({
  templateUrl: 'build/pages/search/search.html',
})
export class Search {

    nav:Nav;

  constructor(nav:Nav) {
    this.nav = nav;
  }

  goToPerson() {
    this.nav.push(Person);
  }
}

search.html:

<ion-navbar *navbar>
  <ion-title>Search</ion-title>
  <ion-buttons end>
    <button>
      <ion-icon name="search"></ion-icon>
    </button>
  </ion-buttons>
</ion-navbar>

<ion-content padding class="page1">
  <h2>Welcome to SEARCH</h2>
  <button (click)="goToPerson()">Go to person</button>
</ion-content>

person.ts :

import {Page} from 'ionic-angular';
import {Nav} from 'ionic-angular';
import {Search} from '../search/search'


@Page({
  templateUrl: 'build/pages/person/person.html',
})
export class Person {
  nav:Nav;

  constructor(nav:Nav) {
    this.nav = nav;
  }
  goToSearch() {
    this.nav.push(Search);
  }
}

person.html :

<ion-navbar *navbar>
  <ion-title>Person</ion-title>
  <ion-buttons end>
    <button (click)="goToSearch()">
      <ion-icon name="search"></ion-icon>
    </button>
  </ion-buttons>
</ion-navbar>

<ion-content padding class="page1">
  <h2>Welcome to PERSON</h2>
  <button (click)="goToSearch()">Go to search</button>
</ion-content>

---

• This related issue may help you: stackoverflow.com/questions/35840761/… - Michael Desigaud
• All this is unclear to me too at this point - Emanuel
• Hey Pierre, I think if you want to achieve a specific behavior and formulate what you need at a high level you will see that maybe a solution should not be as hacky as you are trying to make it. For instance maybe your goal is to "have search button available at every page of my app" - then solution could be to add such button at app.html level and this way make it available across the app. Can you specify what is that you are trying to achieve really? - Sergey Rudenko
• Like you could use fab: stackblitz.com/edit/ionic-rnjjv7 - Sergey Rudenko

<ion-navbar *navbar>
  <ion-title>{{pageTitle}}</ion-title>
  <ion-buttons end>
    <button (click)="goToSearch()">
        <ion-icon name="{{icon}}"></ion-icon>
    </button>
  </ion-buttons>
</ion-navbar>

 import { Component, Input, Inject, ViewChild } from "@angular/core";
 import { Content } from "ionic-angular";
 import { NavController } from "ionic-angular/navigation/nav-controller";
 import {Person} from '../person/person'

@Component({
    selector: "default-header",
    templateUrl: "default-header.html"
})
export class DefaultHeaderComponent {
@Input() pageTitle: any;
@Input() icon= true;
@ViewChild(Content) content: Content;

constructor(
    public navCtrl: NavController,
 ) {
    console.log("Hello DefaultHeaderComponent Component");

 }

  ionViewDidLoad() {
    const self = this;      
  }

  gotNotificationsPage() {
    this.global.setRoot("NotificationsPage");
  }
}

 <default-header [title]="'Person'" [icon]="'search'"></default-header>