I try to pass a method with (click)="method()" but is not working in tabs ,
can anybody help me ?
This is my tab.html :
<ion-tabs color="primary">
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home" ></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Carro" tabIcon="cart" tabBadge="2" tabBadgeStyle="danger"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="Perfil" tabIcon="md-person" (click)="method()"></ion-tab>
</ion-tabs>
In order to call a method when tapping on a tab you can use the ionSelect on the tab element like this.
Template
<ion-tabs>
<ion-tab (ionSelect)="chat()" tabTitle="Show Modal"></ion-tab>
</ion-tabs>
Component
export class Tabs {
constructor(public modalCtrl: ModalController) {
}
chat() {
let modal = this.modalCtrl.create(ChatPage);
modal.present();
}
}
You can check more on the Ionic Api Page.
Related
my ionic 5 app has a side menu and tabs. Each page can have different contents for the side menu and the tabs. I don't want to be duplicating the ion-menu in each page so I created a header component like so (I also do one for the tabs):
HEADER COMPONENT:
<ion-menu contentId="content">
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>{{pageObj.title}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false" *ngFor="let page of pageObj.pages">
<ion-item [routerLink]="page.url" routerDirection="root" [class.active-item]="selectedPath.startWith(page.url)">
<ion-icon>{{page.icon}}</ion-icon>
<ion-label>
{{page.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
Now I use this header component in app.component.html like so:
<ion-app>
<ion-split-pane>
<app-header></app-header>
<ion-router-outlet id="content"></ion-router-outlet>
</ion-split-pane>
</ion-app>
And app.component.ts:
...........
.........
export class AppComponent {
pageObj: any = '';
selectedPath = '';
pages = [
{
title: 'Become a Member',
url: '/pages/membership'
},
{
title: 'Make a Posts',
url: '/pages/posts'
}
]
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
private router: Router
) {
this.initializeApp();
this.pageObj.title = 'Menu';
this.pageObj.pages = this.pages;
this.router.events.subscribe((event:RouterEvent) => {
if (event && event.url) {
this.selectedPath = event.url;
}
})
}
.........
........
So the problem is requires variables (pageObg) that exist in app.component.ts. I am not sure how to pass those variables? I believe I can do something like this:
<app-header [pageObj]="pageObj"><app-header>
but I am not sure how this works! Is there a better way to achieve what I am trying to do?
You are on the right path, but that is not enough. You need to create the corresponding #Input pageObj property in the child component's class. That should be sufficient in your case.
This is the comprehensive guide on Component Interaction, please refer to the first section on "input binding" at this link: https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding
Is it possible to enable and disable a tab in Ionic3 application?
I try to use *ngIf to do that in html, but each time when setting is changed from false to true, an new tab is added; when setting is changed from true to false, the tab doesn't disappear.
html is:
<ion-tabs>
<ion-tab [root]="tab0Root" [tabTitle]="tab0Title" tabIcon="home"></ion-tab>
<ion-tab [root]="tab1Root" [tabTitle]="tab1Title" tabIcon="people"></ion-tab>
<ion-tab *ngIf="setting==true" [root]="tab2Root" [tabTitle]="tab2Title" tabIcon="setting"></ion-tab>
</ion-tabs>
Thanks.
Elaborating Ali Mhanna's comment answer:
The *ngIf="condition" you're using will actually not show the html tag element if the condition is false.
If you want to disable the tag html element instead, you could use [diabled]="condition"
So, using your own code's example:
page.html
<ion-tabs>
<ion-tab [root]="tab0Root" [tabTitle]="tab0Title" tabIcon="home"></ion-tab>
<ion-tab [root]="tab1Root" [tabTitle]="tab1Title" tabIcon="people"></ion-tab>
<ion-tab *ngIf="isShowTab" [disabled]="!isTabEnabled" [root]="tab2Root" [tabTitle]="tab2Title" tabIcon="setting"></ion-tab>
</ion-tabs>
page.ts
private isShowTab: boolean = false; // will NOT SHOW tab if false
private isTabEnabled: boolean = false; // will DISABLE tab if false
Notice the use of ! before isTabEnabled on [disabled] (.html), denying the boolean, meaning it will only disable when isTabEnabled is false.
I'm working on IONIC and I'm trying to do a "dynamic" side menu.
My problem is to call a method from the side-menu "component".
Well there is no problem to call it if the method was in the "TS file" related to the "HTML file" like this <ion-label (click)="onSearch()"> But the method onSearch() is not in the "TS file" related to the "HTML file". Let me explain...
The side-menu as been made like this:
in app.component.html
<ion-app>
<app-side-menu></app-side-menu>
<ion-router-outlet id="mainContent" main></ion-router-outlet>
</ion-app>
in the side-menu.html component
<ion-menu slide="start" type="overlay" contentId="mainContent" menuId="slidingMenu1" id="slidingMenu1">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle auto-hide="false">
<ion-item>
<ion-icon name="Search" color="primary" slot="start"></ion-icon>
<ion-label (click)="onSearch()">
Search
</ion-label>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
and I have a service, CoreMenuService, that call the side-menu, like this :
constructor(public menu: MenuController) { }
// Toggle the Menu1 and hide the one you do not need
public toggleMenu1() {
this.menu.enable(true, 'slidingMenu1');
this.menu.toggle('slidingMenu1');
then in the page I need I will call the side menu:
HTML File
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="onOpenMenu()"><ion-icon name="menu"></ion-icon></ion-button>
</ion-buttons>
<ion-title>person</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<p class="ion-padding">It's the Person page</p>
</ion-content>
TS File where I want use the method trigger by the side-menu
export class PersonPage implements OnInit {
constructor( public menu: CoreMenuService ) {}
ngOnInit() {}
onOpenMenu() {
this.menu.toggleMenu();
}
onShare() {
console.log('shared');
}
}
So how can I use the method declared in the PersonPage.ts, onShare() from the side-menu component ?
I hope it's clear for you, and that you understand me well. :)
There is the source code if you need it to understand better :
Code
Thanks for your help
Try this
In your side menu component.ts you can do something like:
import { PersonPage } from './../../pages/person/person.page';
export class SideMenuComponent implements OnInit , OnDestroy {
onShare() {
const personPage = new PersonPage(null);
personPage.onShare();
}
}
I have a tab navigation under the header on my subview, so i wrote the following html:
<ion-header>
<ion-navbar primary>
<ion-title>Productos</ion-title>
</ion-navbar>
</ion-header>
<ion-tabs tabsPlacement="top">
<ion-tab tabTitle="Catalogo"></ion-tab>
<ion-tab tabTitle="Pedido"></ion-tab>
</ion-tabs>
<ion-content padding>Foo !!</ion-content>
The navbar and the "Foo !!" are displayed but, not the tabs. Any ideas ?
I was wrong. The ion-tabs must be have your own component:
import { Component } from '#angular/core';
import { ProductCatalog } from './catalog.component';
import { ProductCart } from './cart.component';
#Component({
templateUrl: 'tabs.html'
})
export class ProductTabs {
catalog:any = ProductCatalog;
cart:any = ProductCart;
constructor() {}
}
<!-- tabs.html only tabs widget -->
<ion-tabs tabsPlacement="top">
<ion-tab [root]="catalog" tabTitle="CATALOGO"></ion-tab>
<ion-tab [root]="cart" tabTitle="CARRITO"></ion-tab>
</ion-tabs>
ProductCatalog and ProductCart are two normal pages.
The case is the following: I have a ion-tabs container with several ion-tab elements, and different users that logs into my application. What I need to do is to show or hide the ion-tab elements depending on the user type logged.
I have tried to hide just one tab to check if it is possible and the only thing that have worked is:
<ion-tab title="..." icon="..." ui-sref="..." class="ng-hide">
The problem is that I need to do this dynamically, and if I use a directive like ng-show="false" or my own directive to add class="ng-hide", it does not work. Not even encapsulating the ion-tab inside a divand hide this div.
What am I doing wrong? Can somebody help me?
Thanks
If you are already using class attribute on ion-tab, you can modify it as follows?...
<ion-tab title="..." icon="..." ui-sref="..." class="class1 class2 {{myFunctionName()}}">
And in your controller...
$scope.myFunctionName = function(){
if () {
// return "ng-show";
} else {
// return "ng-hide";
}
}
Very late to the party here but encountered this problem and found a more elegant solution (imho).
Using ng-show doesn't work on ion-tab (not sure why not) so instead use ng-if to call a function:
<ion-tab ng-if="showElement()">
Then in your controller:
$scope.showElement = function() {
//logic to return a bool
}
I think this is more elegant because it means the element is never rendered rather than rendered and hidden.
There is no need to add class to hide and show ion-tab.
We need to just maintain one condition for "hidden" attribute of ion-tab like following-
<ion-tabs class="tabs-icon-top tabs-color-active-positive ">
<ion-tab hidden="{{condition}}" title="Home" icon-off="ion-ios-home- outline" icon-on="ion-ios-home" href="#/tab/chats"></ion-tab>
<ion-tab hidden="{{condition}}" title="Log-in" icon-off="ion-person-stalker" icon-on="ion-person-stalker" href="#/tab/login">
</ion-tab>
Using this we can show/hide tab.
Have you tried using ng-show to call a function?
<ion-tab title="..." icon="..." ui-sref="..." ng-show="myFunctionName()">
And in your controller...
$scope.myFunctionName = function(){
//return true or false here
}