# Problem with ionic tabs in ionic version 4

**URL:** <https://forum.ionicframework.com/t/problem-with-ionic-tabs-in-ionic-version-4/140842>\
**Category:** ionic-v3\
**Created:** [September 5, 2018, 1:37pm UTC](https://forum.ionicframework.com/t/problem-with-ionic-tabs-in-ionic-version-4/140842 "2018-09-05T13:37:16Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![mbusby](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mbusby/32/121336_2.png) [@mbusby](https://forum.ionicframework.com/u/mbusby)\
**Post date:** [September 6, 2018, 1:30am UTC](https://forum.ionicframework.com/t/problem-with-ionic-tabs-in-ionic-version-4/140842/2 "2018-09-06T01:30:17Z")

</div>

The problem is that the ngOnInit is only called once because the component remains initialized after navigating to it.

One thing I’ve tried doing is binding to the click event, but the tab element actually contains everything _ **but** _ the tab button, so that won’t work.

```auto
<!-- binding to click event doesn't work like this -->
  <ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)" (click)="tab2Clicked($event)">
    <ion-router-outlet name="contact"></ion-router-outlet>
  </ion-tab>

```

The next best thing to do is to listen for router events on a high level component, such as the HomePage, and either save the data in data store like an object in a Service. Or you could use a Subject to emit the value and subscribe in other parts of your code.

Here is an example I made from the Ionic 4 tabs template:

MyService

```auto
import { Injectable } from '@angular/core';

import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  
  myVar: Subject<string> = new Subject<string>();

  constructor() { }
}

```

HomePage

```auto
import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';

import { MyService } from '../my.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage implements OnInit {

  constructor(private router: Router, private myService: MyService) {}

  ngOnInit() {
    this.router.events.subscribe(event => {
      if(event instanceof NavigationStart) {
        if(event.url == '/tabs/(contact:contact)') {
          // get data from API
          this.myService.myVar.next('new Data');
        }
      }
    });
  }
}

```

ContactPage

```auto
import { Component } from '@angular/core';
import { MyService } from '../my.service';

@Component({
  selector: 'app-contact',
  templateUrl: 'contact.page.html',
  styleUrls: ['contact.page.scss']
})
export class ContactPage {

  myData = 'empty';

  constructor(public myService: MyService) {
    myService.myVar.subscribe(data => {
      this.myData = data;
    })
  }
}

```

---

_[View the full topic](https://forum.ionicframework.com/t/problem-with-ionic-tabs-in-ionic-version-4/140842)._