Ionic Pending Invites Screen
On this screen users will see all the invitations to connect that they received from other users of the app. Here the user will be able to tap on rows to see details of the contacts (like in My Contacts screen). However, we'll also give the user a cool functionality to quickly swipe left or right to dismiss or accept the invitation on the fly.
I won't describe again how to add the new page to Ionic2 application. I've covered this many time before. Instead, you can check out the following commit to see all the required changes.
Now that we added the base code, let's make some small changes to it in order to make the contact rows swipeable:
<ion-list>
<ion-item-sliding *ngFor="let cnt of contacts">
<ion-item (click)="openInvite(cnt)">
<profile-header [fullName]="cnt.getFullName()" [profileImage]="cnt.profileImage"></profile-header>
<p style="margin-top:10px">{{cnt.employment}}</p>
<p>{{cnt.education}}</p>
</ion-item>
<ion-item-options side="left">
<button favorite (click)="acceptInvite(cnt)">Accept</button>
</ion-item-options>
<ion-item-options side="right">
<button danger (click)="dismissInvite(cnt)">Dismiss</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>As you can see, I've wrapped my row layout inside the ion-item-sliding component. This component gives the row the sliding/dragging functionality. The row layout is still in the ion-item component.
The ion-item-options component is used to add buttons that will appear when a row is dragged to one side. You can specify multiple buttons in each ion-item-options component, and you can add icons to them as well. To specify when and where the buttons will appear, you can use the side="left|right" property.
You can see the official ionic2 documentation for ion-item-sliding here.
The code for this page is 90% the same as the My Contacts page implementation since the addition of sliding functionality required minimal effort. Because of this, the implementation of this page was extremely fast, faster and simpler than with Native Android. However, I did found one limitation that I didn't had with Native Android (p.s. keep in mind that I used a 3rd party library for this feature in Android). I couldn't trigger the accept and dismiss functions with a swipe gesture only, and the user is still required to click on a button that appears below the row.
