Ionic 3 Tinder Like Cards

tutorials
1
2 Likes
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

2 Likes
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:

19

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 Object.next (/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 DONā€™T KNOW THE REASON OF GETTING THIS ERROR .please help

20

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

21

Any idea of a date for this, buddy?