I am using Ionic 2.
I have a list of items, where I use <ion-item-options>. They work perfectly as documented here.
When a user slides the item to the left, the options are exposed.
Question
Is it possible to add that when the user long presses on the item, it also exposes the options?
Thanks
<ion-list>
<ion-item-sliding...
<ion-item...
.........
</ion-item>
<ion-buttons>
<button light (click)="alert('todo')"><ion-icon class="ion-ios-heart"></ion-icon>Favourite</button>
</ion-buttons>
</ion-item-sliding>
</ion-list>
The longer press (as said by it's name) can be called on by using (press) instead of (click). This way you can call a function when the ion-item has been pressed and toggle a boolean.
Next in your ion-item-options you can set an *ngIf="yourBoolean" and your options will be toggled
Related
I have array of buttons buttons = [1,2,3,4,5,6] which is diplayed in a row
<ion-row>
<div *ngFor = "let button of buttons" class="buttons">
<button ion-button>{{button}}</button>
</div>
</ion-row>
My requirement is the array buttons look like stepper i need
Yes, you can , please take a look at this stackblitz.
But i advice you to add a dynamic id and name for every button, using index, otherwise you will have a lot of problems
I am using ionic 3. I am trying to do a list of events where the event name is on the left side and the event note (the start time) is on the right side of the item in an ion-note. Here is my code:
<ion-list *ngIf="events.length !== 0">
<ion-item-group>
<ion-item-divider>
Upcoming events
</ion-item-divider>
<button ion-item *ngFor="let event of events" (click)="itemTapped($event, event)">
{{event.name}}
<ion-note item-right>{{event.start | date: 'HH:mm'}}</ion-note>
</button>
</ion-item-group>
</ion-list>
If I do just that, the note gets displayed on the right properly, however the primary text (the event's name) gets chopped off with an ellipsis inserted in the end, even though it would fit just fine. Here's a picture:
I have checked the documentation on ionic's website, and I copied over the demo source from here: https://github.com/ionic-team/ionic/blob/master/demos/src/list/pages/page-one/page-one.html
Funny enough, it looks good in their showcase but pasted into my application it looks just as off as my example.
The question is: how do I make ionic not cut off the primary text in my list?
Thanks.
**UPDATE: **I have found the solution. I have added a css rule (min-width:75%) for ion-notes in an scss associated with a different page, but that somehow got applied to this page as well. Removing that CSS rule fixed the issue for me.
In your code you're using item-right class, however in the documentation as well as the demo source page, it is item-end.
Please check the item placement attributes here:
https://ionicframework.com/docs/api/components/item/Item/
If that doesn't help, you can try overriding the padding-right attribute of item-content.
I face this situation for many hours and i can't find an proper answer. I'm using angular 2 with ionic 2.
I have 1 page (HomePage - home.ts, home.html)
and 1 component (GoogleMaps, google-maps.ts, google-maps.html)
In home.html i have this:
<ion-header>
<ion-navbar>
<ion-buttons end>
<button ion-button (click)="findMyLocation()">Find</button>
</ion-buttons>
</ion-navbar>
</ion-header>
In google-maps.ts i have findMyLocation method but i don't know how to trigger it in my component from home.html (parent's page)
Full code here: http://plnkr.co/edit/Qcy4BKHgC1GBMrLJO7lj
The error is: Cannot read property 'findMyLocation' of undefined
EDIT: i've found one way with this code in home.ts, but i hope to be another one much easier? There is?
#ViewChild(GoogleMaps) gmap: GoogleMaps;
findMyLocation(){
this.gmap.findMyLocation();
}
You can try this:
<google-maps #googlemaps></google-maps>
And then use it like that:
<button ion-button (click)="googlemaps.findMyLocation()">Find</button>
I tried it with a simple example and it worked. I haven't found anything in the docs so far, so I can't tell you how exactly this works. It seems like the # creates a local variable with a reference to your component, which you can then use within the current scope.
I have an HTML template, details.html, that includes this:
<ion-card>{...first card on page...}</ion-card>
<ion-card [hidden]="showColorBool">
<ion-card-header>
Select a color
</ion-card-header>
<ion-card-content>
<!-- buttons should go here -->
</ion-card-content>
</ion-card>
<ion-card>{...next card on page...}</ion-card>
I need to add the buttons as indicated above. They will be will be styled according to values contained in the details array I have stored in local storage like this:
<button ion-button color={{data[index][color]></button>
I am able to access the arrays and values I need from storage like this in my details.ts:
arr.then( data => {
console.log(data);
for ( let index in data ){
console.log(data[index][color]);
}
});
1) The number of buttons is always dynamic (0-10).
2) The "color" value is needed to set the color value of the buttons.
3) I can't not put this functionality in it's own component/page. It needs to be on the page with the other cards.
Any idea on how I might accomplish this? I have been through the docs and SO for everything I could find. Couldn't really find much on this dynamic stuff.
ngFor is what you are after.
ngFor directive: https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html
The ngFor directive allows you to loop through an array in the template.
details.html
<button *ngFor="let item of data" ion-button color="{{item[color]}}"></button>
I have an ion-textarea inside of ion-item. It's shows fine, but when I press over the textarea, it's shows and hides the keyboard. And because the keyboard is hidden, I cannot put any text.
It's like that onblur event was triggered inmediatly after that I touched screen.
This is my code:
<ion-item>
<ion-label stacked>Comment</ion-label>
<ion-textarea [(ngModel)]="formData.comment" name="comment" placeholder="Put any comment..."></ion-textarea>
</ion-item>
Any ideas?
You will often run into errors like this whenever using ion-item in that manner. I had the same thing happen with inputs until I just wrapped them in a div instead.
Per the docs - An item can contain text, images, and anything else. Generally it is placed in a list with other items. It can easily be swiped, deleted, reordered, edited, and more. An item is only required to be in a List if manipulating the item via gestures is required. It requires an ItemSliding wrapper element in order to be swiped.
You may want to restructure your code or format that ion-item in a list of some sort.