A fork of swing.js and angular2-swing for Ionic without external hammerjs dependencies
Clone or download
Latest commit 9051965 Nov 17, 2018



ionic-swing is a fork of the following projects intended to add the swipeable cards capatibilies to Ionic (>= 2)


To install this library, run:

$ npm install ionic-swing --save


1. Import the IonicSwingModule

In your app.module.ts, import the library like following:

import {IonicSwingModule} from 'ionic-swing';

and add it to your imports:

imports: [

2. To implement a card stack

To implement a card stack, follow the example provided by angular2-swing

See https://github.com/ksachdeva/angular2-swing

3. ViewChild and ViewChildren in Ionic v4

In Ionic v4, in order to access the stack and cards as ViewChild and ViewChildren, it's mandatory to use the keyword read to identify correctly the elements


<div swingStack #swingStack>
     <ion-card swingCard #swingCards>


@ViewChild('swingStack', {read: SwingStackDirective}) swingStack: SwingStackDirective;
@ViewChildren('swingCards', {read: SwingCardDirective}) swingCards: QueryList<SwingCardDirective>;

Notes regarding hammerjs

This library need hammerjs but isn't shipped with it because some framework, like Ionic v3, already include it in their own resources. If it isn't your case, you would need to install hammerjs in your project

$ npm install hammerjs --save

and add the following line to your app.component.ts

import 'hammerjs';


To generate the library using ng-packagr (https://github.com/dherges/ng-packagr)

$ npm run packagr

To test locally

$ cd dist
$ npm pack
$ cd /your-project-path/
$ npm install /relative-path-to-local-ionic-swing/dist/ionic-swing-0.0.0.tgz


MIT © David Dal Busco