ng2-swipe-cards
A kit of cards (including tinder-card) for angular2
Demo
https://embed.plnkr.co/ebTZz51SsYUs7wzLemuo/
Installation
$ npm install ng2-swipe-cards --save
Usage
For webpack consumers, first, import SwipeableCardModule to your entry AppModule file,
// Root app module fileimport
Then, import ng2-swipe-cards and hammerjs in your vendor.ts file,
// vendor.ts fileimport '@angular/common';import '@angular/core';... import 'hammerjs';import 'ng2-swipe-cards';
Documentation
The package contains one component called: sc-card. it basically display a card that you can drag and drop.
It's inputs are: fixed: Boolean => set condition to forbid any drag and drop orientation: String => set 'x' to only allow horizontal drags, set 'y' to only allow vertical drags and 'xy' for both callDestroy: EventEmitter => emit to destroy the card
It's outputs are: onRelease: EventEmitter => called when the card is dropped outside it's release radius onSwipe: EventEmitter => called when the card is dragged onAbort: EventEmitter => called when the card is dropped inside it's release radius.
The package contains a directive called: tinder-card. It reproduce the like/dislike functions from the tinder card application.
It's inputs are: tinder-card: object => set an object with this pattern:
It will automatically generate an overlay above your card which display the 'backgroundColor' and 'img' depending on whether the card is beeing liked or disliked. (This is optional) callLike: EventEmitter => emit to force a like action on the card heap. You can set as argument a boolean as liking.
It's ouputs are: onLike: EventEmitter => called when the card is liked or disliked from the release action.