CODEWITHSUNDEEP
ionic-frameworkionic3
R. Dey
R. Dey

Reputation: 509

How may I create a dynamic nav bar with a common button and title in ionic 3?

I am developing an IONIC-3 application, whether I want a dynamic nav bar with a title and a common button. For this reason, I have created a .ts file named commonBtn.ts. Here is the code. 

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from '../login/login';
@Component({
  selector: 'common-button',
  templateUrl: 'commonBtn.html'

})
export class CommonBtnPage {
   constructor(public navCtrl: NavController) { }
   logOut() {
     this.navCtrl.setRoot(LoginPage);
   }
}

And its html is :- 

<ion-header>
    <ion-navbar>
        <ion-title>       I want to create a dynamic name       </ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="logOut()">
                <ion-icon name="log-out"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

Now, my question is that, How may I change the title name dynamically means when user come into "Home Page", title will be "Home" or user come into "About" page, title will be "About".

We can manage this in ionic v1 via $rootScope but here in Ionic v3, how can I resolve this ?

Also I am giving the html of Home page

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
    <common-button></common-button>
  </ion-navbar>
</ion-header>

<ion-content padding>
     <button ion-button (click) = 'clickHere()'> Click </button>
</ion-content>

Please suggest me what to do.

Upvotes: 1

Views: 918

Answers (1)

Suraj Rao
Suraj Rao

Reputation: 29614

Generally, you need to use Input decorator. Check Component Interactions.

In CommonBtnPage,

import { Component,Input } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from '../login/login';
@Component({
  selector: 'common-button',
  templateUrl: 'commonBtn.html'

})
export class CommonBtnPage {

   @Input()title:string;//here

   constructor(public navCtrl: NavController) { }
   logOut() {
     this.navCtrl.setRoot(LoginPage);
   }
}

In the html, set the title,

<ion-header>
    <ion-navbar>
        <ion-title>{{title}}</ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="logOut()">
                <ion-icon name="log-out"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

You can set the component and send the title as:

<common-button [title]="'home'"></common-button>

Upvotes: 1

Related Questions