Tab menu refresh ionic angular

Ionic Framework
1

Does anyone have a solution for the following situation: when you click a button or refresh tab1 (ionviewdidenter or oninit), tab-menu also refresh. I am using ion-tabs, such as Ion-Tabs: Tab-Based Component for App Top-Level Navigation.

2

Can you please rephrase your question, so that it’s clear:

A. What behavior you are observing
B. What behavior you want
C. What the difference is between A and B

3

A) ngOnInit and ionViewDidEnter refresh tab-1.
B) I am trying to create a method that when refresh tab-1 using ngOnInit or ionViewDidEnter, tab-menu also refresh.
C) refresh tab-menu.

4

I’m not clear on what you mean by either “tab-menu” or “refresh”, but I’m getting the feeling that you are having trouble with stale data.

Angular change detection is designed to reflect changes to backing properties in templates. So when you write:

page.html

<span>{{foo}}</span>
<button (click)="bananaFoo()">banana</button>

page.ts

foo = "apple";

bananaFoo(): void {
  this.foo = "banana";
}

When you click the button, the display should change from “apple” to “banana”.

You mentioned lifecycle events: ionViewDidEnter and ngOnInit. You shouldn’t rely on lifecycle events to manage the freshness of your data. The change from “apple” to “banana” should happen when the data changes - it’s not a presentation layer issue. Change detection handles moving model changes into the view.

Maybe the code in this thread is relevant to your situation.

I’m sorry if this doesn’t adequately answer your issue.

5

I am sorry if I was not clear. I will try again.

tab.page.html (tab-menu)

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="person-circle-outline"></ion-icon>
      <ion-label>{{ tab1 }}</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="easel-outline"></ion-icon>
      <ion-label>{{ tab2 }}</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="Tab3">
      <ion-icon name="settings-outline"></ion-icon>
      <ion-label>{{ tab3 }}</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

tab1.page.html
<button (click)=“function()”>function

tab1.page.ts
function(): void {
// Here I would like to change values from {{ tab1 }}, {{ tab2 }} and {{ tab3 }}, in tab.page.html
}

6

I think now I understand. Are you asking "how do I assign to properties of Page1 from inside the controller of Page2"? The short answer is “you don’t, and when you want to, it’s probably a good idea to think very hard about why they’re separate pages if they’re so tightly coupled”.

The longer answer is that you can move tab1, tab2 and tab3 into a service that is injected by both pages. The post I linked earlier has some sample code demonstrating this strategy.

8

Exactly. While I move from Tab1 to Tab2 or Tab3, I can pass values, for examples, using Local Storage.

However, Tab-Menu (tab.page.html) is “static”.
Tab1, Tab2 and Tab3 I can use ionViewDidEnter and refresh values, for example. Tab-Menu I can’t.

9

Many thanks.

I have another question. If is necessary start another topic, let me know.

Do you suggest some topic about “navigate in the same page”, such as used in html

< header >
< nav >
< a href="#top" > TOP < /a >
< a href="#middle" > MIDDLE < /a >
BOTTOM < /a >
< /nav >
< /header >
< main >
< article >
< section >< h1 > < a id=”top” >< /a>M > TOP < /h1 >

< p > … < /p >
< / section >
10

I would not recommend using localStorage for this. In fact, I would not recommend using localStorage for anything, because there are better choices for anything you want to do with it.

If you need to persist things across runs of the app, use ionic-storage. If you just need to communicate within a single app run, use a service provider.

As for your other question, yes, a separate topic would probably be better. You may wish to look at the Angular router documentation, specifically the bit about anchorScrolling.

11

The command window.location.assign(’/’) reload the page, hence “tab.page.html”.