Ionic 3 Tinder Like Cards


Very nice work!

I do have a question about this line:


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

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

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”


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.

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

@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


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

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

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:

I have the same problem. Any solutions?

Hi, I couldn’t find any solution. but i used this library for the same tinder card .This plugin gives us more control over the cards and animations.You can try this library.

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

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:

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


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

How can we trigger swipe on a button click ?

Ionic 4 version would be nice too.

I am getting an error while building it using the following command

ionic cordova build android --prod

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’.

Error: The Angular AoT build failed. See the issues above
at /home/benepik/Desktop/currently working/kriti/bestieionic2new/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:237:55
at step (/home/benepik/Desktop/currently working/kriti/bestieionic2new/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:32:23)
at (/home/benepik/Desktop/currently working/kriti/bestieionic2new/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:13:53)
at fulfilled (/home/benepik/Desktop/currently working/kriti/bestieionic2new/node_modules/@ionic/app-scripts/dist/aot/aot-compiler.js:4:58)


I believe that this is caused by the fact that the module was built in angular2 apparently. Do you know how to downgrade. tried to post a topic but my post is still under review

Any idea of a date for this, buddy?