In this tutorial, you will learn, how to create Tinder application cards. This will be very easy. You just need your own image URL or other URL's.

Browser preview.


Create a new Ionic 3 project.

ionic start tindercards blank

Install the Swipe Cards Module using the below command.

cd tindercards
npm install ng2-swipe-cards --save

Add the SwipeCardsModule class to the imports in the app.module.ts file.

import { SwipeCardsModule } from 'ng2-swipe-cards';
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
SwipeCardsModule
]


Then add the below code to the home.html file.

<div class="card-container" *ngIf="ready">
        <sc-card padding *ngFor="let attendant of attendants" 
[orientation]="cardDirection" 
[tinder-card]="cardOverlay" 
[callDestroy]="attendant.destroyEvent" 
[callLike]="attendant.likeEvent" 
(onLike)="onCardInteract($event)">

<div class="user_img" [style.background-image]="attendant.asBg"></div>
        </sc-card>
    </div>


Add the below code in the home.ts file.

import { Component,EventEmitter } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  ready = false;
  attendants = [];
  cardDirection = "xy";
  cardOverlay: any = {
      like: {
          backgroundColor: '#28e93b'
      },
      dislike: {
          backgroundColor: '#e92828'
      }
  };

  images=["https://media.vogue.in/wp-content/uploads/2017/12/2017-01-2-disha-patani-hairstyles-makeup-vogue-india.jpg",
 "https://spiderimg.amarujala.com/assets/images/2017/11/06/750x506/anushka-shetty_1509948439.jpeg",
  "http://static.dnaindia.com/sites/default/files/styles/full/public/2018/02/04/648069-rakul-preet-singh.jpg",
"https://pbs.twimg.com/profile_images/928946397436506113/6QE6iLb7.jpg",
"https://pbs.twimg.com/media/DUFbk2cV4AAwl2v.jpg",
"https://qph.fs.quoracdn.net/main-qimg-980a13410f56739c66864b89c4466263-c",
"http://starsvilla.com/wp-content/uploads/2017/09/19425346_145774522639533_5306252787913326592_n.jpg",
"https://i1.wp.com/akmatter.com/wp-content/uploads/2018/01/Rakul-Preet-Singh.jpg",
"https://data1.ibtimes.co.in/cache-img-600-450/en/full/571296/1494666323_anushka-shetty-baahubali.jpg"
]
  constructor(private sanitizer: DomSanitizer) {

      for (let i = 0; i < this.images.length; i++) {
          this.attendants.push({
              id: i + 1,
              likeEvent: new EventEmitter(),
              destroyEvent: new EventEmitter(),
              asBg: sanitizer.bypassSecurityTrustStyle('url('+this.images[i]+')')
          });
      }

      this.ready = true;
  }

  onCardInteract(event) {
    console.log(event);
  }

}


Change the image URL to your own image URL.

Ionic software version details while writing this tutorial.

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 7.1.0 

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-sim : 5.0.13 
    Node    : v6.10.0
    npm     : 5.6.0 
    OS      : macOS High Sierra
    Xcode   : Xcode 9.1

Full Source Code:
 

https://github.com/bharathirajatut/ionic3-tinder-like-cards