In the following contacts list in iOS 10 device, while doing infinite scrolling angular2+Meteor+Ionic2 app, many times the click event gets fired and the contact detail page gets displayed.
<ion-content class="contacts-page-content">
<ion-list>
<button ion-item *ngFor="let contact of contacts | async" (click)="showContactDetails(contact)" text-wrap class="contacts">
<ion-avatar item-left>
<img[src]="contact.picture">
</ion-avatar>
<h2 class="contact-name">{{contact.firstName}} {{contact.lastName}}</h2>
<h4 ion-text color="grayText">{{contact.jobTitle}}</h4>
<h3 class="contact-supplier" *ngIf="contact.supplierName">{{contact.supplierName}}</h3>
</button>
</ion-list>
<ion-infinite-scroll (ionInfinite)="pullMoreContacts($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more contacts...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
Is there anyway the click while scrolling can be avoided? Any help is greatly appreciated.
Thanks.
Check here for ionic 2 gestures.
Try
(tap)=showContactDetails(contact)
instead of click.
Related
I have created a form, in the form I have a button
<form #f='ngForm' (ngSubmit)='onAddBusiness(f)' >
....
....
<ion-item>
<button ion-button icon-left outline block (click)='openMap()'>
بۆ دیاریکردنی شوێن کلیک لێرە بکە
<ion-icon name="map"></ion-icon>
</button>
<p *ngIf="(position==undefined); else elseblock">
هیچ شوێنێک دیاری نەکراوە
</p>
<ng-template #elseblock>
<p #elseblock>
دەست خۆش شوێنەکە دیاری کرا
</p>
</ng-template>
</ion-item>
<ion-item>
<button type='submit' ion-button block [disabled]="!f.valid">ناردن</button>
</ion-item>
</ion-list>
</form>
the button is present a Modal to set the location on a map.
The issue is whenever I click the Button to open the modal, the form is submitted.
In the button to open modal, specify the type as button.
<button type='button' ion-button icon-left outline block (click)='openMap()'>
بۆ دیاریکردنی شوێن کلیک لێرە بکە
<ion-icon name="map"></ion-icon>
</button>
I'm very new in Ionic2 or Ionic at all. I set up a new project and want to design a small menu at the bottom of the foot of my page. I didn't do anything else on this project and trying to imitate the steps of a tutorial video. but when I use the icon-only directive on a button the background of the button only becomes a bit smaller. The background doesn't disappear.
<ion-content class="bg-image" padding>
</ion-content>
<ion-footer>
<ion-toolbar>
<button ion-button icon-only>
<ion-icon name="home"></ion-icon>
</button>
<button ion-button icon-only>
<ion-icon name="add"></ion-icon>
</button>
</ion-toolbar>
</ion-footer>
Here's my code. I hope you can help me.
For Ionic 4 - <ion-button fill="clear">
You can use the fill property now, e.g:
<ion-button (click)="onClick()" fill="clear">
<ion-icon slot="icon-only" name="home"></ion-icon>
</ion-button>
Adding a clear attribute should give the result you want if i understand correctly:
<ion-content class="bg-image" padding>
</ion-content>
<ion-footer>
<ion-toolbar>
<button ion-button icon-only clear>
<ion-icon name="home"></ion-icon>
</button>
<button ion-button icon-only clear>
<ion-icon name="add"></ion-icon>
</button>
</ion-toolbar>
</ion-footer>
For Ionic 4:
...
<ion-button (click)="onClick()">
<ion-icon slot="icon-only" name="home"></ion-icon>
</ion-button>
...
You can go to this link for more references https://ionicframework.com/docs/api/button
ionic 4 :
<ion-button (click)="onClick()" fill="clear">
<ion-icon slot="icon-only" name="home"></ion-icon>
</ion-button>
I am a beginner in Ionic, trying to display a side menu page when users clicks on a button. Instead, what I'm still getting is the back button. Here's my code:
//menu .html
<ion-header>
<ion-navbar>
<ion-title>menu</ion-title>
<ion-buttons start>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
//app.html
<ion-menu [content]="content">
<ion-content padding>
<h2>This is a cool menu</h2>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content></ion-nav>
What am I doing wrong?
Intro
Ok so, ionic's navigation works like a stack. You push a component on the stack, pop it off or create a new stack.
To push a component on the stack you'll need to call (if you call your NavController navCtrl) navCtrl.push(someComponent);
To pop a component, call navCtrl.pop(someComponent);
To create a new stack, call navCtrl.setRoot(someComponent);
Why is this important?
If you want the menu-icon to show, the page has to be at the lowest level of the stack, this is in ionic called the root.
When a page is not root, the menu-icon will magically transform into a back-button, so you can go back to your root page. (f.e. when you want to see more details about an item)
Sure, not really reading anymore, but what do I need to do?
Well, first of all, just include the <ion-header> on your page, since you want to show the icon on your page. In your code, you're trying to get a menu-icon in your ion-menu (which is your sidemenu).
So you will have something like the following, create your menu in app.component.html
app.component.html
<ion-menu type="overlay" [content]="content">
<ion-content>
<button menuClose icon-only>
<ion-icon name="close"></ion-icon>
</button>
<button menuClose>
My Custom button WHOOOOO
</button>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
page1.html
<ion-header>
<ion-navbar>
<ion-title>Page 1 FTW</ion-title>
<ion-buttons start>
// So this icon will change depending on the page's place in the ionic Stack
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<button ion-button menuToggle>Open my great menu!</button>
</ion-content>
Now in your app.component.ts you want to make Page1 the root, this way you'll see your menu icon in the header.
This can easily be done by changing the rootPage property of AppComponent.
Simply import { Page1 } from 'your/page1/location' and call (in constructor f.e. this.rootPage = Page1;;
Now Page1 will have a menu-icon in it's header which will show your menu!
If you want to include a button which opens your menu, just add the menuToggle property to it.
Your tags seems to be in a wrong order. Can you try with code bellow?
<ion-menu>
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Menu</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>This is a cool menu</h2>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
my Ionic 2 app has a problem when I show a modal on my home page: when the user closes the modal and get back to the home page, the menu button is not there. That only happens when that modal is shown. Not sure if I'm doing something wrong with the navController. Anyone faced this problem? The header of my page is like this:
<ion-header>
<ion-navbar>
<ion-buttons left class="menu-button">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title text-center>
<div class="text-header">Home Page</div>
</ion-title>
</ion-navbar>
</ion-header>
I call the modal like this:
const modal = this.modalCtrl.create(SetMotivoIntervalo, {chamada_id: this.chamada_id});
modal.present();
And for closing modal:
onCloseModal(){
this.viewCtrl.dismiss();
}
Try adding enable-menu-with-back-views="true" property to ion-side-menus
<ion-side-menus enable-menu-with-back-views="true">
</ion-side-menus>
My ionic side menu is working in android mobile but in ios i am not getting.
here is the code for .html
<button ion-button menuToggle icon-only class="menuButton">
<ion-icon name="menu"></ion-icon>
</button>
<ion-menu [content]="mycontent">
<ion-content>
<ion-list>
<p>some menu content, could be list items</p>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav #mycontent ></ion-nav>
i dont understand where is my issue is if you need anything please let me know
my side menu is working in android and browser except ios
Try adding type="overlay" to the sidemenu:
<ion-menu [content]="mycontent" type="overlay">
use click function instead of menuToggle
<button ion-button icon-only start (click)="openSideMenu()">
<ion-icon name="md-menu"></ion-icon>
</button>
open menu using
openSideMenu() {
this.menuCtrl.enable(true)
this.menuCtrl.toggle();
}
disable menu before you push to new page
this.menuCtrl.enable(false)