Common header for tab pages

It seems that you do not recommend using a single header implemented on all tab pages, correct (in this case an ion-header inside tabs.html)? The problem is that I get a user avatar from firebase storage. That has to be retrieved on every tab change. There doesn’t seem to be a way to call a function on tab change plus this get is redundant on every page but I can get it from local storage. Is there a call on tab change?

Why can’t you just store it in an injected provider?

What you should do is actually have an ion-header not in the tabs.html, but in each view that is loaded in the tabs.

For example using the tabs sample as base, home, about, and contact.html all have their own header.

What you can use is the tab rootParams input and pass that data down to each tab. This way, you’re only getting the data from firebase once, and it’s still working with the separate headers.

Can I two way bind rootParams because the download url is gotten async?

    // Get the download URL
    avatarRef.getDownloadURL().catch(err => {
      console.log('oh no');
    }).then((avatarUrl) => {
      this.params.data = this.user.avatar = avatarUrl;
    });

I passed and object and it seems to be fixed. So it’s now this.params.data.avatar not directly into this.params.data.
Thanks

Can’t we have one header so to avoid making a change in all tabs instead one place, when we have a header change?

1 Like