How do i detect once a view has been loaded between tab switches

Ionic Framework ionic-v3
1

I need to do this from a nested view.
Home Class

<ion-tab [root]="addresses" tabTitle="My addresses"></ion-tab>
<ion-tab [root]="finder" tabTitle="Finder"></ion-tab>

and need to detect a switch to my addresses tab from Addresses class which is imported to home.

using (select) only works within Home

2

So you could use the change event on the parent tabs component

<ion-tabs (change)="tabsChangedExpression()">
  <ion-tab [root]="addresses" tabTitle="My addresses"></ion-tab>
  <ion-tab [root]="finder" tabTitle="Finder"></ion-tab>
</ion-tabs>
3

the issue here is that tabsChangedExpression() is defined in MyAddressesPage as it needs to reflect changes in the MyAddressesView, and thus unreachable from the HomePage. is it possible for the tabsChangedExpression() to be triggered from HomePage

import {Page} from 'ionic-framework/ionic';
import {FinderPage} from '../finder/finder';
import {MyAddressesPage} from '../my-addresses/my-addresses';

@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor() {
    this.tabMyAddressesRoot = MyAddressesPage;
    this.tabFinderRoot = FinderPage;
  }
}
4

Hmmm alright. Let me think on this

5

any new thoughts @mhartington ?

6

a little bit to much but: add a service to you app, which holds the current tab and returns an obersvable.

Everytime you change the tab --> set the current tab value in the service and emit the changes --> every other component can subscribe the changes.

7

Thank you for the quick response.
Could you please share some code demonstrating this?

8

So i settled for a hacky fix, I stored “this” in Window, like this window.MyAddressesThis; then used that to update the view on tab change.

9

read about angular 2 services.
i wrote a tutorial for the german angular community and the code is here:
https://github.com/angularjs-de/angular2-tutorial/blob/master/08-services/app/services/pizza.service.ts

Simple put the @Injectable() on top of a class definition to load it with angular dependency injection.

Now you can load the service in a component:
https://github.com/angularjs-de/angular2-tutorial/blob/master/08-services/app/components/app.component.ts

and inject it via the constructor.

Keep in mind there are two ways to use services --> globally and locally
this line:
providers: [PizzaService],

creates a new Instance of your Service for your component.
If you want to share data between multiple components --> load the service in your base-component, inject it and add
providers: [PizzaService],.

In every child-component do NOT add
providers: [PizzaService], !!!
Import it, Inject it in your constructor and you will get the “global” instance and not a new one.

Angular 2 uses RxJS Observables:

A good article how you work with it:

(Even with http-requests)