# 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:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![galaba](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@galaba](https://forum.ionicframework.com/u/galaba)\
**Post date:** [September 5, 2018, 1:37pm UTC](https://forum.ionicframework.com/t/problem-with-ionic-tabs-in-ionic-version-4/140842/1 "2018-09-05T13:37:16Z")

</div>

I am trying to implement the tabs in ionic 4, I am using below code :

```auto
<ion-tabs color="primary" class="activity-tabs" tabbarPlacement="top">
    <ion-tab padding-horizotal class="ionTabsPublic" label="tab1" href="/Tabs/Tabs1/(tab1:tab1)">
      <ion-router-outlet stack name="tab1"></ion-router-outlet>
    </ion-tab>
    <ion-tab padding-horizotal label="tab2" href="Tabs/Tabs2/(tab2:tab2)">
      <ion-router-outlet stack name="tab2"></ion-router-outlet>
    </ion-tab>
  </ion-tabs>

```

Created Module called Tabs under Tabs Module Created other two components one Tab1 and Tab2

So below code is used for routing in Tabs Module :

```auto
  const routes: Routes = [
  {
    path: 'Tabs',
    component: ActivityFeedsPage,
    children: [
      {
        path: 'tab1',
        outlet: 'tab1',
        component: Tabs1Page
      },
      {
        path: 'tab2',
        outlet: 'tab2',
        component: Tab2Page
      }
    ]
  },
  {
    path: '',
    redirectTo: '/Feeds/Tabs/(tab1:tab1)'
  }
];

```

Now everything is working fine, but the problem is every time click tab I am making rest api call, I wrote call in

```auto
  ngOnInit() {
    
restapi call();
   
  }

```

But It is not calling clicking on tabs, it is calling first time only…

Could you please help me anybody how can we achieve this concept.

Thanks in advance !!!

---

<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;
    })
  }
}

```

---

<div class="post-metadata">

**Author:** ![galaba](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@galaba](https://forum.ionicframework.com/u/galaba)\
**Post date:** [September 6, 2018, 12:39pm UTC](https://forum.ionicframework.com/t/problem-with-ionic-tabs-in-ionic-version-4/140842/3 "2018-09-06T12:39:01Z")

</div>

Here is the question when click on tab service call is not happens, because `ngOnit()` will call only once even `constructor` also called only once.

when click on tab, refresh should happens and get data from `DB`

---

<div class="post-metadata">

**Author:** ![dwagh](https://avatars.discourse-cdn.com/v4/letter/d/dfb087/32.png) [@dwagh](https://forum.ionicframework.com/u/dwagh)\
**Post date:** [September 12, 2018, 10:59am UTC](https://forum.ionicframework.com/t/problem-with-ionic-tabs-in-ionic-version-4/140842/4 "2018-09-12T10:59:11Z")

</div>

Tabs might not have a click event but they do have an ionChange event.

so just try binding the api call to the ionChange of the tab.

depending on your preference you could also use ionWillChange or ionDidChange

```auto
<ion-tabs color="primary" class="activity-tabs" tabbarPlacement="top">
    <ion-tab padding-horizotal class="ionTabsPublic" label="tab1" href="/Tabs/Tabs1/(tab1:tab1)" (ionChange)="apiCall()">
      <ion-router-outlet stack name="tab1"></ion-router-outlet>
    </ion-tab>
    <ion-tab padding-horizotal label="tab2" href="Tabs/Tabs2/(tab2:tab2)" (ionChange)="apiCall()">
      <ion-router-outlet stack name="tab2"></ion-router-outlet>
    </ion-tab>
  </ion-tabs>

```

---

<div class="post-metadata">

**Author:** ![galaba](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@galaba](https://forum.ionicframework.com/u/galaba)\
**Post date:** [September 19, 2018, 7:32am UTC](https://forum.ionicframework.com/t/problem-with-ionic-tabs-in-ionic-version-4/140842/5 "2018-09-19T07:32:00Z")

</div>

actually I was tried `ionWillChange` or `ionDidChange` but both calling only once like `ngOnInit()`

---

<div class="post-metadata">

**Author:** ![dwagh](https://avatars.discourse-cdn.com/v4/letter/d/dfb087/32.png) [@dwagh](https://forum.ionicframework.com/u/dwagh)\
**Post date:** [September 20, 2018, 11:58am UTC](https://forum.ionicframework.com/t/problem-with-ionic-tabs-in-ionic-version-4/140842/6 "2018-09-20T11:58:44Z")

</div>

how about `ionSelect`?

---

<div class="post-metadata">

**Author:** ![galaba](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@galaba](https://forum.ionicframework.com/u/galaba)\
**Post date:** [September 20, 2018, 12:07pm UTC](https://forum.ionicframework.com/t/problem-with-ionic-tabs-in-ionic-version-4/140842/7 "2018-09-20T12:07:25Z")

</div>

But `ionSelect` is tab based event, if you click on tab it will call but tabs in parent component.

---

<div class="post-metadata">

**Author:** ![dwagh](https://avatars.discourse-cdn.com/v4/letter/d/dfb087/32.png) [@dwagh](https://forum.ionicframework.com/u/dwagh)\
**Post date:** [September 20, 2018, 12:24pm UTC](https://forum.ionicframework.com/t/problem-with-ionic-tabs-in-ionic-version-4/140842/8 "2018-09-20T12:24:46Z")

</div>

yes so just add `ionSelect` to every tab and let each call the same function.

or update your ionic/angular to the latest beta version `npm i --save @ionic/angular@4.0.0-beta.11` and try if `ionChange` works on tabs

---

<div class="post-metadata">

**Author:** ![galaba](https://avatars.discourse-cdn.com/v4/letter/g/2acd7d/32.png) [@galaba](https://forum.ionicframework.com/u/galaba)\
**Post date:** [September 20, 2018, 12:47pm UTC](https://forum.ionicframework.com/t/problem-with-ionic-tabs-in-ionic-version-4/140842/9 "2018-09-20T12:47:27Z")

</div>

Yes we can do that, but I have tabs module have tabs but how to update the data inside the other component.

let say example

`ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)" (ionSelect )="tab2Clicked($event)" ><ion-router-outlet name="contact"</ion-router-outlet></ion-tab>`

how to pass the data to `contact` component to **update** `UI`

---

<div class="post-metadata">

**Author:** ![manigujjula](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/manigujjula/32/122659_2.png) [@manigujjula](https://forum.ionicframework.com/u/manigujjula)\
**Post date:** [May 6, 2019, 10:07am UTC](https://forum.ionicframework.com/t/problem-with-ionic-tabs-in-ionic-version-4/140842/10 "2019-05-06T10:07:04Z")

</div>

Try like this

ionViewDidEnter {

restapi call();

}

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:17pm UTC](https://forum.ionicframework.com/t/problem-with-ionic-tabs-in-ionic-version-4/140842/11 "2021-07-19T21:17:58Z")

</div>