I have a page called Matches and feeds. In the matches pages I have 3 tabs as below
<ion-tab [root]="tab1Root" tabTitle="Applied" id="active" #active></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Failed"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Saved"></ion-tab>
So when I navigate from feed page to matches page I want to navigate to the tab1Root tab. When from some other page I navigate or click on the matches page Then i want it to navigate to the tab1Root automatically and refresh the page. How can I do it? When I navigate from the feeds page to matches page I'm not getting the output which is present in my tab1Root IonViewDidEnter(). How can I solve this issue?
You should use ionViewWillEnter instead of ionViewDidLoad to reload a tab page every time the user enters this page.
To switch programmatically to another tab:
this.navCtrl.parent.select(0) //your tab index
Related
What is the best way to navigate from a tab page 1 to another tab page 2?
The scenario is that I when I press a button in a tab page, it should navigate to another tab page. I can't set the main tab page's selected tab property because I'm in the tab page 1 viewmodel.
Here is my code, this isn't working but is what I intend to do.
NavigationService.NavigateAsync($"{KnownNavigationParameters.SelectedTab}=TabPage2");
The working code is this, but the problem is that it reloads everything since it navigates to another instance of the MainTabbedPage then selects the TabPage2 tab.
NavigationService.NavigateAsync($"MainTabbedPage?{KnownNavigationParameters.SelectedTab}=TabPage2");
If you want to navigate to tab use the following code, I am using this for navigating from a drawer and it works fine hope it will work for you.
var navParams = new NavigationParameters
{
{ "Title", "Page Title" }
};
NavigationService.NavigateAsync("NavigationPage/{Tab Parent Page}/" + {Tab Page}, navParams );
I'm new to Ionic 3, and what I want to do it's to get the specified scenario:
I go to Tab 1, click on some Item in Tab 1 and go to a view of this item, If I now switch to Tab 2, when I go to Tab 1, the view showed should be the Tab 1 view, not the Item View for a Tab 1 element.
In ionic 1 I previously have used $ionicHistory.clearHistory() but seems now it's not available. I've tried several uses of NavController but seems I am not using it properly or where it means to be used. How can I accomplish this scenario? Also I want to disable the back button in the root Tab 1 view, like, I don't want to see any type of back button when I'm on this view, without any exception.
Thanks in advance!
if any content of some tab link to a new page . the tab should be in hidden state so add this attribute "tabsHideOnSubPages" to your tab tag.
example:
<ion-tabs>
<ion-tab [tabsHideOnSubPages]="true" [root]="tab1Root"></ion-tab>
<ion-tab [root]="tab2Root"></ion-tab>
<ion-tab [root]="tab3Root"></ion-tab>
</ion-tabs>
So in this case when the first tab has button link to another page the state of toolbar tabs will be in hidden state and thats will not happen for second and third tab because the value of "tabsHideOnSubPages" attribute is false by default.
I have a tab layout and I'd like to hide a tab, but when I do that, the view will not show anything. I thought [show] was for the icon, not the view.
<ion-tabs #myTabs id="myTabs" [selectedIndex]="0">
<ion-tab tabTitle="Menu" [root]="menuPage" [rootParams]="clientParams" [show]="false"></ion-tab>
</ion-tabs>
^ this displays nothing but removing the [show]="false" makes the view appear like normal.
Is there a way to allow the view to be seen while removing the icon from the tab bar?
The first part of your question is confusing of what you are trying to do. But I will try to answer the part of "how to remove icon from tab bar"
Normally if you do not have the tabIcon property in the ion-tab tag there wont have any icon show.
However if the tab icon is still showing for you you can set tabsLayout to icon-hide to hide the icon.
<ion-tabs tabsLayout="icon-hide">
<ion-tab [root]="tab1Root" tabTitle="Home"></ion-tab>
</ion-tabs>
Reference:
https://ionicframework.com/docs/api/components/tabs/Tabs/
I have 2 - 3 pages that are a child section within a page, similar to tabs. Logically the user would not expect to go back to the previous tab on the back click. As these are implemented as separate pages the user is taken back to the individual tabs and not to the main section.
How can I get the user back to a custom URL only for some pages?
When you go to a new tab, you could delete the previous one from history with :
$ionicHistory.removeBackView();
Docs
If you want to custom your back function in devices i recommend this:
$ionicPlatform.registerBackButtonAction(function,priority)
In that function you can use $state.go to redirect where ever you want.
Docs here
You can skip back navigation history by using ui-view instead of ion-nav-view component.
So if for example you were using:
<ion-tabs>
<ion-tab ui-href="state">
<ion-nav-view name="content"></ion-nav-view>
</ion-tab>
</ion-tabs>
You would turn it into:
<a ui-sref="state">Link</a>
<div>
<ui-view name="content"><ui-view>
</div>
It will require some more template layout changes but this should get you started. Basically if you use ion-nav-view you'll get history and ionic.view events, if ui-router only then just view changes.
I know we can pass data to the child tab from parent tab by doing following as described here:
<ion-tabs>
<ion-tab [root]="chatRoot" [rootParams]="chatParams" tabTitle="Chat" tabIcon="chat"><ion-tab>
</ion-tabs>
Is there any way I can do the reverse stuff i.e passing the data from child tab to parent tab.
I have the following scenario:
1. I have "next" button on the the Tabs(parent) page.
2. When user selects the value on the child page then I need to navigate the user to next page based on the selected value when he clicks next.
I have met your problem. you should use Events in Ionic 2 for sending and responding to application level across your app. So you can send data from child tab to parent tab and update status for it.