Transfer values from the Tabs-controller to each individual Tab?


Tabs can have childs. Each individual child is a Tab.

Is there a way to transfer values from the Tabs-controller to each individual Tab? Or is there a way to fetch values by the Tabs-controller, when I want to request them from an Tab-instance?

… BUT all without usage of a service as a “transfer bridge”?

Tabs component is used like basic usage in the documentation, so there’s no magic …

import { Tab1 } from './tab1-page';
import { Tab2 } from './tab2-page';

  template: '
      <ion-tab [root]="tab1"></ion-tab>
      <ion-tab [root]="tab2"></ion-tab>
export class MyTabs {
  tab1: Tab1;
  tab2: Tab2;
  public myFieldIWantToShareWithEachTab: any; // <----- This is what I look for ...

And this could be an individual Tab-child …

@Component({ template: '<ion-content>Tab 1</ion-content>' })
export class Tab1 {
  public getMyFieldIWantToShareFromTheTabsController(): any {

    // --->>> how, without usage of service? <<<---


How to access the value in myFieldIWantToShareWithEachTab from the tabs controller when I’m inside of a tab instance? Or how can I “push” the value to the constructor of each tab (the other way)?

Would I have to use NavParams or similar? Something in the html part of the Tabs component near [root]='...'?

Nevermind. I found it …

You can also pass some parameters to the root page of the tab through rootParams. Below we pass chatParams to the Chat tab:

 <ion-tab [root]="chatRoot" [rootParams]="chatParams" tabTitle="Chat" tabIcon="chat"></ion-tab>
export class Tabs {
  chatRoot = ChatPage;

  // set some user information on chatParams
  chatParams = {
    user1: 'admin',
    user2: 'ionic'

  constructor() {


And in ChatPage you can get the data from NavParams:

export class ChatPage {
  constructor(navParams: NavParams) {
    console.log('Passed params',;