Build Status Dependency Status devDependency Status downloads

All Contributors Angular 2 Style Guide PRs Welcome version MIT License

A small standalone Angular2 plugin that allows your card component to either swipe left or right. To view the live demo, please visit (You can also try to open from your mobile device 🎉)!


npm install --save ng2-swipeable-card


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

  // Root app module file
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { SwipeableCardModule } from 'ng2-swipeable-card';

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

    imports: [
    declarations: [AppComponent],
    bootstrap: [AppComponent]

Then, import ng2-swipeable-card and hammerjs in your vendor.ts file,

  // vendor.ts file
  import '@angular/common';
  import '@angular/core';

  import 'hammerjs';
  import 'ng2-swipeable-card';

Lastly, simply add your content between swipeable-card tags to consume swipeable-card styles like box-shadow and default padding. Example markup for a list of swipeable cards that you can swipe either left or right.

  import { Component, ViewEncapsulation } from '@angular/core';

    selector: 'app',
    encapsulation: ViewEncapsulation.None,
    <div class="swipeable-card-container">
      <swipeable-card *ngFor="let card of cards; let idx = index;"
        <img swipeable-card-image src="{{ card.image }}">
            {{ }}
            <small>{{ idx }}</small>
          <p>{{ record.content }}</p>

          <button swipeable-button (click)="like(card)">LIKE</button>
          <button swipeable-button (click)="share(card)">SHARE</button>

  export class AppComponent {
    // load any number of cards
    cards = [
      { name: 'Helen', image: '', visible: true, content: 'Helen: . Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat' },
      { name: 'Elliot', image: '', visible: false, content: 'Elliot: Lorem ipsum dolor sit amet, consectetur 3adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
      { name: 'Matt', image: '', visible: false, content: 'Matt: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' }

    // click `like` action
    like(card): void {}

    // click `share` action
    share(card): void {}

Getting Started

Dependencies Prerequisites

Make sure you have Node version >= 5.11 and NPM >= 3

If you have nvm installed, which is highly recommended (brew install nvm) you can do a nvm install --lts && nvm use in $ to run with the latest Node LTS. You can also have this zsh done for you automatically.

Once you have those, you should install these globals with npm install --global:

  • webpack (npm install --global webpack)
  • webpack-dev-server (npm install --global webpack-dev-server)
  • typings (npm install --global typings)

Running Development

Once you have installed all prerequisites,

  • fork this repo
  • clone your fork
  • nvm use use the node version from .nvmrc
  • npm install to install all dependencies
  • npm run typings to install all related typings
  • npm start to run our demo app locally

If you are having issues setting up your local development, try rm -rf node_modules && npm cache clean, and re-run npm install. If issues still persist, please file an issue.



MIT © Jay Kan

Ng2 Swipeable Card

A simple swipeable card component implemented in Angular2 :sparkles:

Ng2 Swipeable Card Info

⭐ Stars 15
🔗 Source Code
🕒 Last Update a year ago
🕒 Created 5 years ago
🐞 Open Issues 6
➗ Star-Issue Ratio 3
😎 Author JayKan