Create Tinder Swipe Questionnaire with ionc5 Gestures

Source Code

In this tutorial I will be walking you through how to create a tinder swipe questionnaire with ionic5 gestures.

In February 11, 2020 Ionic announced the release of a new version -  Ionic5, and one of the top feature that was introduced is the Gestures. This is better than having to install hammerjs.

Creating a blank App

Let's start by creating a new blank ionic5 project by running the command below

Building the questions card

Since we are going to have more than one question, we will start by creating some dummy questions. So in the home.page.ts file let add the following code.

The next thing is to create those cards based on the questions in the html page of our app.

Modify the code in home.html file by adding the following code within the ion-content.

The result of the app should look like this:

Let modify our questions card so that they can be stacked on each other. Open the home.page.scss and paste the css below:

Now our cards are stacked on top of each other like this:

We need to show some part of the cards behind the first card so that people can know that we have more than one card and also fix the question 5 of 5 to be question 1 of 5.

To achieve this, we are going to add some style attribute namely transform and opacity to the ion-card component in our app like so:

With this in place, our app should now look like this:

Implementing the Swipe Effect

We are now set to implement the swipe effect by using ionic gestures.

In the home.page.ts file import GestureController, ElementRef, ViewChildren etc like so:

import { Component, ElementRef, AfterViewInit, ViewChildren, QueryList } from '@angular/core';
import { GestureController, IonCard, Platform } from '@ionic/angular';

The next thing is to make sure that our app home page implements AfterViewInit because we are going to be implementing the login after all views has been initialized.

We need to be able to make reference to the ionic-card component in our app's html, so we will be using the viewchildren so that we can query the list of cards in our app like so:

 @ViewChildren(IonCard, { read: ElementRef }) tinderCards: QueryList<ElementRef>;

Let's create the method to set up our gesture. Copy and paste the following code:

We can now call this function within our ngAfterViewInit like so:

 ngAfterViewInit() {
    const tinderCardArray = this.tinderCards.toArray();
    this.setGesture(tinderCardArray);
  }

The full code in the home.page.ts should now look like so:

We now have a fully functioning swipe questionnaire. Hope this helps.