Develop Reference

How to implement swiping ion-items in Ionic without clicking?

I am trying to implement an ion-list with ion-items that are swipable but don't have to be clicked on the side to trigger an event.
It should work like like the default contacts app on Samsung phones, where you can either swipe left to call or right to send a SMS.
The list in the parent page looks like this:
<ion-list *ngFor="let person of persons | filter:searchTerm">
<app-person-entry [person]="person" (click)="openModal(person)"></app-person-entry>
</ion-list>
The person-entry component looks like this:
<ion-item>
<ion-avatar slot="start">
<img src={{person.icon}}>
</ion-avatar>
<div>
<div class="container">
<ion-label>{{person.lastname}}</ion-label>
<ion-label>{{person.firstname}}</ion-label>
</div>
<div class="container">
<ion-label>{{person.postalCode}}</ion-label>
<ion-label>{{person.city}}</ion-label>
<ion-label>{{person.address}}</ion-label>
</div>
</div>
</ion-item>

you can use ion-item-sliding.
e.g:
<ion-list>
<ion-item-group #myItemsId>
<ion-item-sliding (ionSwipe)="swipeEvent($event, myItemsId)">
<ion-item-options side="start">
<ion-item-option>CALL</ion-item-option>
</ion-item-options>
<ion-item>
<ion-label>Item Options</ion-label>
</ion-item>
<ion-item-options side="end">
<ion-item-option>SMS</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
</ion-list>
.ts:
swipeEvent($event, item) {
console.log($event)
if ($event.detail.side == 'start') {
console.log('call now');
this.closeAllItems(item)
} else {
console.log('SMS now');
this.closeAllItems(item)
}
}
closeAllItems(item) {
let a = Array.prototype.slice.call(item.el.children)
a.map((val) => {
val.close();
})
}

Scrolling to bottom of div without using setTimeout()

I am making an internal live chat system using Firebase. I make this call to get a list of all chat messages:
firebase.database().ref('chatrooms/'+this.roomkey+'/chats').on('value', resp => {
this.chats = [];
this.chats = snapshotToArray(resp);
setTimeout(() => {
if(this.content._scroll) { this.content.scrollToBottom(0); }
}, 1000);
});
In my view I have this HTML to loop through the chats:
<ion-content>
<ion-list>
<ion-item *ngFor="let chat of chats" no-lines>
<div class="chat-status" text-center *ngIf="chat.type==='join'||chat.type==='exit';else message">
<span class="chat-date">{{chat.sendDate | date:'short'}}</span>
<span class="chat-content-center">{{chat.message}}</span>
</div>
<ng-template #message>
<div class="chat-message" text-right *ngIf="chat.user === nickname">
<div class="right-bubble">
<span class="msg-name">Me</span>
<span class="msg-date">{{chat.sendDate | date:'short'}}</span>
<p text-wrap>{{chat.message}}</p>
</div>
</div>
<div class="chat-message" text-left *ngIf="chat.user !== nickname">
<div class="left-bubble">
<span class="msg-name">{{chat.user}}</span>
<span class="msg-date">{{chat.sendDate | date:'short'}}</span>
<p text-wrap>{{chat.message}}</p>
</div>
</div>
</ng-template>
</ion-item>
</ion-list>
</ion-content>
And here is my relevant CSS:
ion-content {
height: 100%;
overflow: hidden;
.item-md, .item-ios {
background: none;
}
}
There are currently 30 chat messages. They are loaded from Firebase and then after a second, when the setTimeout finishes, the user is automatically scrolled to the bottom of the page so they can see the most recent message. This makes the page load a bit odd with the jump down to the bottom of the page after a second.
Is there any way to replace the timeout with something that will achieve the goal of the user initially seeing the most recent messages? Maybe there is some trigger that can be made that detects that chats has changed in the view and then does the scroll? This would seem better than a fixed 1 second pause?

You could scroll to the bottom of the list when changes to the list of chats are detected:
Associate a template reference variable to the ion-item elements (e.g. #chatItems)
Use ViewChildren to get the QueryList of ion-item elements
In ngAfterViewInit, subscribe to the QueryList.changes event
Scroll to the bottom of the list when the list changes
<ion-content>
<ion-list>
<ion-item #chatItems *ngFor="let chat of chats" no-lines>
...
</ion-item>
</ion-list>
</ion-content>
export class MyComponent {
#ViewChildren("chatItems") chatItems: QueryList<any>;
ngAfterViewInit() {
this.scrollContentToBottom();
this.chatItems.changes.subscribe(() => {
this.scrollContentToBottom();
});
}
scrollContentToBottom() {
if(this.content._scroll) {
this.content.scrollToBottom(0);
}
}
...
}
Note: I used QueryList<any> because I don't know the ion-item component type. You can put the appropriate type if you know what it is.

Getting a issue while using filter and infinite scroll together in ionic list?

I have created a ionic hybrid app in that i am getting issue in angularjs filter.let us explained clearly in below
<input type="search" placeholder="Search personalities" ng-model="name" ng-change='alert("changed!")'>
</label>
<ion-list id="personalities-list3">
<!--<ion-item class="item-divider" id="personalities-list-item-divider1"> A</ion-item> auto-list-divider auto-list-divider-value="{{per.name}}"-->
<ion-item class="item-avatar" id="personalities-list-item27" ng-repeat="per in personality|limitTo:showlength|filter:{name:name}" ng-click="selectedpersonality(per)" auto-list-divider auto-list-divider-value="{{per.name}}" auto-list-divider-visible="{{divvisible}}">
<!--<img image-lazy-src="http://www.podxref.com/img/personality/small/{{per.profileimage}}" ng-if='per.profileimage.length > 0' image-lazy-loader="lines" image-lazy-distance-from-bottom-to-load="1000">-->
<img src="http://www.podxref.com/img/personality/small/{{per.profileimage}}" ng-if='per.profileimage.length > 0'>
<img src="img/no-image.jpg" ng-if='per.profileimage==""'>
<h2>{{per.name}}</h2>
</ion-item>
</ion-list>
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>
the above code i have used filter in ng-repeat and also i have used a infinite scroll for list and then personality array contains 18000 values that is in alphabetical order .so for the problem is if i search "zolten rhimer"the list is empty even though the name is present in array .please any one help me to solve this issue
Thanks,

You use like this
<ion-list id="personalities-list3">
<!--<ion-item class="item-divider" id="personalities-list-item-divider1"> A</ion-item> auto-list-divider auto-list-divider-value="{{per.name}}"-->
<ion-item class="item-avatar" id="personalities-list-item27" ng-repeat="per in personarraytosearch=personality|filter:{name:name}|limitTo:showlength " ng-click="selectedpersonality(per)" auto-list-divider auto-list-divider-value="{{per.name}}" auto-list-divider-visible="{{divvisible}}">
<!--<img image-lazy-src="http://www.podxref.com/img/personality/small/{{per.profileimage}}" ng-if='per.profileimage.length > 0' image-lazy-loader="lines" image-lazy-distance-from-bottom-to-load="1000">-->
<img src="http://www.podxref.com/img/personality/small/{{per.profileimage}}" ng-if='per.profileimage.length > 0'>
<img src="img/no-image.jpg" ng-if='per.profileimage==""'>
<h2>{{per.name}}</h2>
</ion-item>
</ion-list>
i think this will help you

Remove ionic 2 ion-card div using Javascript in controller

I need to remove an ionic 2 card when someone clicks on the trash icon. The code I have so far gives a querySelector is null error when I run it.
The view html looks like this:
<ion-card *ngFor="#mediaItem of mediaItems" id="item{{mediaItem.id}}" class="media-item">
<ion-card-header class="title-header">
<div class="title-item">
{{mediaItem.title}}
</div>
<ion-icon name="trash" class="bookmark_trash_icon" (click)="removeItem(mediaItem.id)"></ion-icon>
</ion-card-header>
<ion-card-content class="outer-content" >
<img src='{{mediaItem.url}}'>
</ion-card-content>
<ion-item class="bookmark-media-item">
<!-- <button (click)="topup(mediaItem)" clear item-left> -->
<div style="float:left;">
<ion-icon name="heart"></ion-icon>
{{mediaItem.liked}}
<ion-icon name="close-circle"></ion-icon>
{{mediaItem.disliked}}
</div>
<a (click)="showUserProfile(mediaItem.owner, mediaItem.username)" style="float:left;">
{{mediaItem.username}}
</a>
<div style="float:right;">
<img src="img/tiny-v.png" class="bookmark-v-icon">
{{mediaItem.credits_left}}
</div>
</ion-item>
</ion-card>
My controller javascript code looks like this:
removeItem(theItemID) {
let cardToHide = '#item'+theItemID;
document.querySelector(cardToHide).style.display = 'none';
}
The error I get is
querySelector is null

You can send the object instead of the id by changing that part of the code:
(click)="removeItem(mediaItem)"
And then find that object in you mediaItems array and delete it from there. Then your view will be automatically updated.
First get the index of that object in the array, and then you can use the mediaItems.splice(index, 1) to delete it from the array:
removeItem(theItem) {
let index = this.mediaItems.indexOf(theItem);
this.mediaItems.splice(index,1);
}

Ionic infinite scrolling, only scrolls when navigated away and back to page

I have a ionic content with a ionic list in it.
Here is my HTML:
<ion-content>
<ion-view>
<ion-list >
<div class='myCard' ng-repeat="maanta in maanta| limitTo : limit track by $index">
<a class='normala' href="#/tab/dash/{{maanta.id}}">
<div class='cardHeader item-text-wrap'>
{{maanta.title}}
</div>
<hr class='divi'>
<div class='cardDivider item-text-wrap'>
{{maanta.source}} - {{maanta.pub_date}}
</div>
<hr class='divi'>
<div class='cardBody item-text-wrap'>
{{maanta.summery}}
</div>
</a>
</div> </ion-list>
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
</ion-content>
</ion-view>
Here is my JS:
$scope.limit = 10;
$scope.loadMore = function() {
$scope.limit +=10
if ( $scope.maanta.length <$scope.limit) {
$scope.noMoreItemsAvailable = true;
}
$scope.$broadcast('scroll.infiniteScrollComplete');
};
The problem
When I first land on the page the infinite scrolling doesn't change limit for my ng-repeat. When I navigate away to another page and come back the infinite loop works as expected.

Check out your HTML. There's a mistake in the tag sequence :
<ion-content>
<ion-list >
<div class='myCard' ng-repeat="maanta in maanta| limitTo : limit track by $index">
<a class='normala' href="#/tab/dash/{{maanta.id}}">
<div class='cardHeader item-text-wrap'>
{{maanta.title}}
</div>
<hr class='divi'>
<div class='cardDivider item-text-wrap'>
{{maanta.source}} - {{maanta.pub_date}}
</div>
<hr class='divi'>
<div class='cardBody item-text-wrap'>
{{maanta.summery}}
</div>
</a>
</div> </ion-list>
<ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
</ion-content>
The tag <ion-view> was not required as such.

I think you should reconsider your approach and try to push the new content to your view.
The key is pushing the new content.
Fore example (from user DILIP on codepen:)
<ion-infinite-scroll distance="2"
on-infinite="loadMoreData()"
ng-if="!moredata" >
</ion-infinite-scroll>
var app = angular.module("ionicInfiniteScrollApp",['ionic']);
app.controller("InfiniteAppCntrl",function($scope)
{
$scope.moredata = false;
$scope.loadMoreData=function()
{
$scope.items.push({id: $scope.items.length});
if($scope.items.length==100)
{
$scope.moredata=true;
}
$scope.$broadcast('scroll.infiniteScrollComplete');
};
$scope.items=[];
});
Here's the link to the codepen:
http://codepen.io/d4dilip/pen/rkxyA