I tried put a (click) event on the ion-tab element but nothing happens
<ion-tabs>
<ion-tab (click)="chat()" tabIcon="add-circle"></ion-tab>
</ion-tabs>
You should use (ionSelect) instead of (click):
<ion-tabs>
<ion-tab (ionSelect)="chat()" tabIcon="add-circle"></ion-tab>
</ion-tabs>
And in the tabs code:
export class Tabs {
constructor(public modalCtrl: ModalController) {
}
chat() {
let modal = this.modalCtrl.create(ChatPage);
modal.present();
}
}
Related
pardon if it's a simple issue to solve or it has already been solved here. But, I just can not figure it out. The issue is, I have two tabs. While in the content page if I call content.scrollToTop() then it works fine. But, I am not sure about how to scroll to the top of a tab content page when the tab is clicked or selected?
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="home" **(click)="scrollToTop()"**>
<ion-label>Home</ion-label>
<ion-icon name="home"></ion-icon>
<!-- <ion-badge>6</ion-badge> -->
</ion-tab-button>
<ion-tab-button tab="tab1">
<ion-label>About</ion-label>
<ion-icon name="information-circle"></ion-icon>
</ion-tab-button>
<!-- <ion-tab-button tab="tab2">
<ion-label>Profile</ion-label>
<ion-icon name="settings"></ion-icon>
</ion-tab-button> -->
</ion-tab-bar>
import { Component, OnInit , ViewChild } from '#angular/core';
import { Events } from '#ionic/angular';
import { IonContent } from '#ionic/angular';
#Component({
selector: 'app-tabs',
templateUrl: './tabs.page.html',
styleUrls: ['./tabs.page.scss'],
})
export class TabsPage implements OnInit {
#ViewChild(IonContent) content: IonContent;
constructor( public event:Events) { }
scrollToTop(){
this.content.scrollToTop();
}
}
you can keep separate method
<ion-tabs>
<ion-tab [root]="tab1Root" (click)="myMethod()"></ion-tab>
<ion-tab [root]="tab2Root" (click)="myMethod2()"></ion-tab>
<ion-tab [root]="tab3Root" (click)="myMethod3()"></ion-tab>
</ion-tabs>
then write your logic
myMethod()
{
this.content.scrollToTop();
}
What you need to do is use the ionViewWillEnter event which can be explained further in the Ionic Page Life Cycle documentation:
Ionic Page Life Cycle - Ionic Documentation
If your page was tabs2 then the code could look like this:
import { Component, OnInit, ViewChild } from '#angular/core';
import { IonContent } from '#ionic/angular';
#Component({
selector: 'app-tab2',
templateUrl: './tab2.page.html',
styleUrls: ['./tab2.page.scss'],
})
export class Tab2Page implements OnInit {
#ViewChild(IonContent) private content: IonContent;
constructor() { }
ngOnInit() {
}
ionViewWillEnter() {
this.content.scrollToTop();
}
}
I am having the requirement where the app is having tab view. The fourth tab is having popover and that popover contains more 3 menus which should act as a tab means it should open like other 3 tabs.
I have tried but the page is not displaying as it is not setting the popover page as root page inside tab view.
tabs.html
<ion-tabs #myTab>
<ion-tab [root]="tab1Root" tabIcon="theme-business"></ion-tab>
<ion-tab [root]="tab2Root" tabIcon="theme-table"></ion-tab>
<ion-tab [root]="tab3Root" tabIcon="theme-like"></ion-tab>
<ion-tab (ionSelect)="presentPopover($event)" tabIcon="ios-apps-outline"></ion-tab>
</ion-tabs>
tabs.ts
presentPopover(event) {
let popover = this.popoverCtrl.create(TabPopoverPage, {});
popover.present({ ev: { target: event.btn._elementRef.nativeElement } });
}
tabPopover.html
<ion-content padding>
<ion-list>
<button ion-item (click)="openPage('SalonDetailsPage')">
<ion-icon name="theme-profile" item-left></ion-icon>
Profile Page
</button>
<button ion-item (click)="openPage('SalesReportPage')">
<ion-icon name="theme-wallet" item-left></ion-icon>
Sales Report
</button>
<button ion-item (click)="openPage('SettingsPage')">
<ion-icon name="theme-setting" item-left></ion-icon>
Setting
</button>
</ion-list>
</ion-content>
tabPopover.ts
openPage(pageName: any) {
// this.navCtrl.setRoot(pageName);
this.navCtrl.push(pageName);
}
Help would be appreciated!
Please Note, while this implementation is not the best and there are probably a dozen other ways to solve this problem, this was the easiest.
you can find a working example here: https://stackblitz.com/edit/ionic-v3-custom-tabs
there may be a way to Programmatically add a new ion-tab item but i could not locate that on the ionic docs but here is my take of the implementation based on this question
Step 1:
we currently have 4 tab items, we add the extra tab items we need.
<ion-tab [root]="tab4Root" show= "false" tabIcon="person"></ion-tab>
<ion-tab [root]="tab5Root" show= "false" tabIcon="cash"></ion-tab>
<ion-tab [root]="tab6Root" show= "false" tabIcon="settings"></ion-tab>
NOTE the show attribute
show: according to ionic docs hides the tab element . https://ionicframework.com/docs/api/components/tabs/Tab/#input-properties
this creates the ion-tab elements but hides them.
step 2:
we need a reference to the ion-tabs element which was already define with <ion-tabs #myTab>
page: tabs.ts
// we are getting the ion-tabs using the template reference then assigning it to a local variable tabRef
#ViewChild('myTab') tabRef: Tabs;
presentPopover(event) {
let popover = this.popoverCtrl.create(PopoverPage, {navpage: this}); // note the navpage: this
popover.present({ ev: { target: event.btn._elementRef.nativeElement } });
}
we need a way to reference this component (TabsPage), so we are passing it as a nav params
https://ionicframework.com/docs/api/components/popover/PopoverController/#create
https://ionicframework.com/docs/api/navigation/NavParams/#get
step 3:
page: popover.html
<button ion-item (click)="openPage(4)">
<ion-icon name="person" item-left></ion-icon>
Profile Page
</button>
<button ion-item (click)="openPage(5)">
<ion-icon name="cash" item-left></ion-icon>
Sales Report
</button>
<button ion-item (click)="openPage(6)">
<ion-icon name="settings" item-left></ion-icon>
Setting
</button>
// each of the number represent the tab index of the page we wish to navigate to see: https://ionicframework.com/docs/api/components/tabs/Tabs/#selecting-a-tab
page: PopoverPage
// the tabs page ref
tabsPageRef: TabsPage;
constructor(
public navCtrl: NavController,
public navParams: NavParams
) {
// recall the navpage: this from the TabsPage?
this.tabsPageRef = this.navParams.get('navpage');
}
openPage(pageName: any) {
// here, we are using the reference of the TabsPage to access the local variable tabref
this.tabsPageRef.tabRef.select(pageName)
}
I'm not sure how to open the tab2Root, using a button from my help.html page. I'm reading the docs, but there's nothing about that.
help.html:
<button ion-button large clear icon-end color="primary">
Shop <ion-icon name="arrow-forward"></ion-icon>
</button>
tabs.html:
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Products" tabIcon="search"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Cart" tabIcon="cart"></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="Account" tabIcon="person"></ion-tab>
<ion-tab [root]="tab5Root" tabTitle="Help" tabIcon="help-buoy"></ion-tab>
</ion-tabs>
You could create a function in the help.ts class which is something like this:
SwitchTab(){
this.navCtrl.parent.select(0); //Selects the first tab
}
In order to thave the navCtrl object available you have to inject that with the constructor of your class:
import { NavController } from 'ionic-angular';
...
constructor(private navCtrl: NavController) {
}
Don't forget to bind your button to the SwitchTab method in the class like this:
<button ion-button large clear icon-end color="primary" (click)="SwitchTab()">
Shop <ion-icon name="arrow-forward"></ion-icon>
</button>
Here is a sample of my structure.
Home
Closure
| - Inside Page 1
Progress
Resources
| - Inside Page 2
My first problem is when clicking a link to "Inside Page 2" from "Home" the back button doesn't show. That's fine (for me at least, not sure about project owners). My main problem is when I click on the 'Resources' tab, it will not take me to that view. It only shows "Inside Page 2". I can only get to "Resources" if I had visited that tab first.
Here are my states for that inside page and the main tab page.
.state('tab.resources', {
url: '/resources',
views: {
'tab-resources': {
templateUrl: 'templates/tab-resources.html',
controller: 'NothingCtrl'
}
}
})
.state('tab.resources.social', {
url: '/social',
views: {
'tab-resources#tab': {
templateUrl: 'templates/resources/social.html',
controller: 'SocialCtrl'
}
}
})
Here is my tabs.html.
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Home Tab -->
<ion-tab title="Home" icon="mb-icon icon-home" ui-sref="tab.home">
<ion-nav-view name="tab-home"></ion-nav-view>
</ion-tab>
<!-- Closures Tab -->
<ion-tab title="Closures" icon="mb-icon icon-closures" ui-sref="tab.closures">
<ion-nav-view name="tab-closures"></ion-nav-view>
</ion-tab>
<!-- Progress Tab -->
<ion-tab title="Progress" icon="mb-icon icon-progress" ui-sref="tab.progress">
<ion-nav-view name="tab-progress"></ion-nav-view>
</ion-tab>
<!-- Resources Tab -->
<ion-tab title="Resources" icon="mb-icon icon-resources" ui-sref="tab.resources">
<ion-nav-view name="tab-resources"></ion-nav-view>
</ion-tab>
</ion-tabs>
I am creating an App in ionic but I am stuck in routing issues. Currently I have an app view with a side menu and on Home page I have two tabs Tab 1 and Tab 2 which have different UI Views tab1.html & tab2.html
Tabs Code in home.html
<ion-tabs class="tabs-striped tabs-top tabs-background-positive tabs-color-light hp" tabs-style="tabs-icon-top" tabs-type="tabs-positive" style="top: 60px !important;" animation="slide-left-right">
<!-- Dashboard Tab -->
<ion-tab title="Tab 1" href="#/home/tab1">
<ion-nav-view name="tab1-content"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Tab 2" href="#/home/tab2">
<ion-nav-view name="tab2-content"></ion-nav-view>
</ion-tab>
</ion-tabs>
tab1.html and tab2.html code:
<ion-view view-title="Tab 1">
<ion-content overflow-scroll="true" padding="false" class="has-header">
Tab 1 Content
</ion-content>
</ion-view>
<ion-view view-title="Tab 2">
<ion-content overflow-scroll="true" padding="false" class="has-header">
Tab 2 Content
</ion-content>
</ion-view>
Routing Code in 'routing.js'
.state('menu.home', {
url: '/page21',
views: {
'side-menu21': {
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
}
}
})
.state('menu', {
url: '/side-menu21',
templateUrl: 'templates/menu.html',
abstract:true
})
.state('menu.about', {
url: '/page10',
views: {
'side-menu21': {
templateUrl: 'templates/about.html',
controller: 'settingsCtrl'
}
}
})
... and so on
Issue:
When I navigate Home from menu or from login page (which is separate) I didn't see tabs' content. Can anyone help me what's wrong?
The page url seems like: http://localhost/testapp/#/side-menu21/page21
Your assistance in this issue will be appreciated.
Thanks!
I think you should add abstract property in home tab state :
.state('menu.home', {
url: '/page21',
abstract: true,
views: {
'side-menu21': {
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
}
}
})
you need 2 abstract states, one for a side menu, and one for Tabs itself, if you can create a plunkr/codepen of what you have I could be able to help you.