CODEWITHSUNDEEP
angular
hydrococcus
hydrococcus

Reputation: 487

Angular (2.x) Change Title from another Component

i have a Component named search.componet.ts, that include a couple of Tabs:

import {tabSearchOne} from "./tab-search-one;
import {tabSearchTwo} from "./tab-search-two;
import {tabSearchThree} from "./tab-search-three;    

@Component({
  selector: 'page-search',
  templateUrl: 'search.html'
})

export class SearchPage {

   tabRoot1: any = tabSearchOne;
   tabRoot2: any = tabSearchTwo;
   tabRoot3: any = tabSearchThree;

   title: string = 'Search';

   constructor(public navCtrl: NavController, public navParams: NavParams) {

      }

   }

In the related Template i have a Title

<h3>{{title}}</h3>

How can i change this Title from one of Tab-Components?

Upvotes: 0

Views: 477

Answers (3)

hydrococcus
hydrococcus

Reputation: 487

Thank you all, i found a solution. I use IONIC 2, and in my Class (SerachPage) i defined a function:

title: string = 'Default Title';

...

setTitle(tabtitle){
    this.title = tabtitle;
}

And in my Tab i call this function like:

<ion-tab [root]="tabRoot1"  (ionSelect)="setTitle('My new Title')"></ion-tab>

Upvotes: 0

Valex
Valex

Reputation: 1196

I have no idea where's the title that you have to change but you have a lot of different options. Where the simplest could be

<tab button (click)="title='whatever'">

and this obviously will change that title when you click the according tab. using a service could be another solution injecting it in all the component that need to know about this title, but in your case might be overkill.Something like this anyway.

  @Injectable()
  export class TitleService {
   title: string = 'whatever';
  }

The advantage of this anyway is also that in case you need to register some additional behaviour you can use an observable to handle the changing of title and subscribe to it's change for additional behaviours.

The last thing that i can thing of is that every component receive an @Input() from the parent which decide the title.

I hope this was enough to give you some ideas.

Upvotes: 1

J&#233;r&#232;m Le Blond
J&#233;r&#232;m Le Blond

Reputation: 691

You have to create a SearchPage title property then display it on the page with <h3>{{title}}</h3>.

The Tab-Components should modify this property when you want to

Upvotes: 0

Related Questions