# swipe-cards-ionic

> Build an Angular library compatible with AoT compilation and Tree shaking

Latest version **1.1.2** (published 2019-04-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install swipe-cards-ionic
pnpm add swipe-cards-ionic
yarn add swipe-cards-ionic
bun add swipe-cards-ionic
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2019-04-03 |
| First published | 2019-04-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 203.5 KB |
| Known vulnerabilities | 0 (+19 in 3 direct dependencies) |
| Install scripts | no |
| Author | robeflorence |
| Maintainers | robeflorence |
| Keywords | angular, angular2, card, tinder |

## Links

- npm: https://www.npmjs.com/package/swipe-cards-ionic
- Repository: https://github.com/robisim74/ng2-swipe-cards
- Issues: https://github.com/robisim74/ng2-swipe-cards/issues
- npm.io page: https://npm.io/package/swipe-cards-ionic

## Dependencies (10)

- [hammerjs](https://npm.io/package/hammerjs.md) ^2.0.8
- [ng-bootstrap](https://npm.io/package/ng-bootstrap.md) ^1.1.16-1
- [@angular/core](https://npm.io/package/@angular/core.md) ^2.0.1
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^2.0.1
- [@angular/common](https://npm.io/package/@angular/common.md) ^2.0.1
- [@angular/router](https://npm.io/package/@angular/router.md) ^3.0.1
- [@types/hammerjs](https://npm.io/package/@types/hammerjs.md) 2.0.33
- [@angular/platform-server](https://npm.io/package/@angular/platform-server.md) ^2.0.1
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^2.0.1
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^2.0.1

## Recent versions

- 1.1.2 (latest) — 2019-04-03
- 1.1.1 — 2019-04-03

## README

# ng2-swipe-cards
A kit of cards (including tinder-card) for angular2

# Demo
https://embed.plnkr.co/ebTZz51SsYUs7wzLemuo/

# Installation
```bash
$ npm install ng2-swipe-cards --save
```

# Usage

For webpack consumers, first, import SwipeableCardModule to your entry AppModule file,

```bash
// Root app module file
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SwipeCardsModule } from 'ng2-swipe-cards';

import { AppComponent } from './app/';

@NgModule({
  imports: [
    BrowserModule,
    SwipeCardsModule
    ...
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
});
```

Then, import ng2-swipe-cards and hammerjs in your vendor.ts file,
```bash
// vendor.ts file
import '@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:
```bash
{
  'like':
  {
    'backgroundColor': 'green',
    'img': 'anyLikeImage.png'
  },
  'dislike':
  {
    'backgroundColor': 'red',
    'img': 'anyDislikeImage.png'
  }
}
```
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.

---
_Source: https://npm.io/package/swipe-cards-ionic · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._