Ionic 3 Tinder Like Cards


#1

#2

Very nice work!

I do have a question about this line:

  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"
]

Do i have to hardcode the images in there or can I just load it from my backend as an array ?


#3

There is no need to hard code. This is just a demo. You can simply get image url from your backend/REST API


#4

Hello, I’m facing this error
Can’t bind to ‘orientation’ since it isn’t a known property of ‘sc-card’.

  1. If ‘sc-card’ is an Angular component and it has ‘orientation’ input, then verify that it is part of this module.
  2. If ‘sc-card’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
  3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. ("
    <sc-card padding *ngFor=“let secret of secrets”

[ERROR ->][orientation]=“cardDirection”

[tinder-card]=“cardOverlay”
")


#5

Have you installed SwipeCardsModule?

If not, then use this command to install it.

npm install ng2-swipe-cards --save

Then add it to the app.module.ts file.


#6

I did, but the trick was to add the module even in the page.module.ts:)


#7

@bharathirajatut after i install ng2-swipe-cards module getting this error

Error during template compile of ‘SwipeCardsModule’ Function calls are not supported in decorators but ‘makeDecorator’ was called in ‘NgModule’ ‘NgModule’ references ‘NgModule’ ‘NgModule’ references ‘NgModule’ ‘NgModule’ references ‘NgModule’ ‘NgModule’ calls 'makeDecorator

This is my enviornment info

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

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@ionic/app-scripts : 3.1.9
Cordova Platforms  : android 7.0.0
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 26.1.1
Node              : v8.11.1
npm               : 5.6.0
OS                : Windows 10

#8

Very nice work and great tutorial, @bharathirajatut! I was wondering how can I make the images to show in random order? Thank you.


#9

Hi very nice work !

I have a question :
Is it possible to swipe a card from a button ? Which function/event need I to call ?

Ty :slight_smile:


#10

I have the same problem. Any solutions?


#11

Hi, I couldn’t find any solution. but i used this library https://github.com/ksachdeva/angular2-swing for the same tinder card .This plugin gives us more control over the cards and animations.You can try this library.


#12

Hey @jobehi I am getting the same error.
Can you share your page.module.ts.


#13

What a wonderful work… Thanks a lot.
But it’s not working for ionic 4. :disappointed_relieved:
Hopefully the update “Ionic 4 Tinder Like Cards” is coming. :muscle:


#14

Thank you. Yes I will release Ionic 4 version once it releases stable version


#15

That would be cool. I can not wait to try the new version. :heart_eyes:


#16

How can we trigger swipe on a button click ?


#18

Ionic 4 version would be nice too.
:+1: