title: Ionic 4 share data between tabs
body: <p>I'm struggling to share data between tabs in Ionic 4 / Angular 8 application.</p>
  
  <p>And I have been looking all over the internet for solutions other than Subscribing to Observables but can't find any. to top everything, IonicFramework documentation doesn't have any note on that.</p>
  
  <p>below is my basic settings </p>
  
  <p><strong>booking-routing.module.ts</strong></p>
  
  <pre><code>const routes: Routes = [
      {
          path: 'booking',
          component: BookingPage,
          children: [
              {
                  path: 'detail',
                  children: [
                      {
                          path: '',
                          loadChildren: () =&gt; import('./detail/detail.module').then((m) =&gt; m.DetailPageModule)
                      }
                  ]
              },
              {
                  path: 'tracking',
                  children: [
                      {
                          path: '',
                          loadChildren: () =&gt; import('./tracking/tracking.module').then((m) =&gt; m.TrackingPageModule)
                      }
                  ]
              },
              {
                  path: 'pass',
                  children: [
                      {
                          path: '',
                          loadChildren: () =&gt; import('./pass/pass.module').then((m) =&gt; m.PassPageModule)
                      }
                  ]
              },
              {
                  path: '',
                  redirectTo: 'booking/detail',
                  pathMatch: 'full'
              }
          ]
      },
      {
          path: '',
          redirectTo: 'booking/detail',
          pathMatch: 'full'
      }
  ];
  </code></pre>
  
  <p><strong>booking.html</strong></p>
  
  <pre><code>&lt;ion-tabs&gt;
      &lt;ion-tab-bar slot="bottom"&gt;
        &lt;ion-tab-button tab="detail"&gt;
          &lt;ion-label&gt;Details&lt;/ion-label&gt;
        &lt;/ion-tab-button&gt;
  
        &lt;ion-tab-button tab="tracking"&gt;
          &lt;ion-label&gt;Tracking&lt;/ion-label&gt;
        &lt;/ion-tab-button&gt;
  
        &lt;ion-tab-button tab="pass"&gt;
          &lt;ion-label&gt;Pass&lt;/ion-label&gt;
        &lt;/ion-tab-button&gt;
      &lt;/ion-tab-bar&gt;
    &lt;/ion-tabs&gt;
  </code></pre>
  
  <p><strong>booking.ts</strong></p>
  
  <pre><code>booking: Booking;
  
  constructor() {
      this.booking = someValue
  }
  </code></pre>
  
  <p>I'm trying to share <code>this.booking</code> variable with </p>
  
  <p>any help will be appreciated</p>