{"id":16490134,"url":"https://github.com/jaykan/ng2-swipeable-card","last_synced_at":"2026-03-16T17:06:06.756Z","repository":{"id":146833457,"uuid":"66311899","full_name":"JayKan/ng2-swipeable-card","owner":"JayKan","description":"A simple swipeable card component implemented in Angular2 :sparkles:","archived":false,"fork":false,"pushed_at":"2016-09-15T21:54:40.000Z","size":51,"stargazers_count":15,"open_issues_count":6,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-14T19:09:00.833Z","etag":null,"topics":["angular","angular2","angular2-component","card-component","material-design","swipeable-cards"],"latest_commit_sha":null,"homepage":"https://ng2-swipeable-card.firebaseapp.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JayKan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-08-22T22:11:37.000Z","updated_at":"2020-09-21T14:48:15.000Z","dependencies_parsed_at":"2023-04-25T21:03:49.416Z","dependency_job_id":null,"html_url":"https://github.com/JayKan/ng2-swipeable-card","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/JayKan/ng2-swipeable-card","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayKan%2Fng2-swipeable-card","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayKan%2Fng2-swipeable-card/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayKan%2Fng2-swipeable-card/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayKan%2Fng2-swipeable-card/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JayKan","download_url":"https://codeload.github.com/JayKan/ng2-swipeable-card/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JayKan%2Fng2-swipeable-card/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279020646,"owners_count":26086895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","angular2-component","card-component","material-design","swipeable-cards"],"created_at":"2024-10-11T13:46:43.669Z","updated_at":"2025-10-14T19:09:32.454Z","avatar_url":"https://github.com/JayKan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ng2-swipeable-card\n\n[![Build Status][build-status-badge]][build-status]\n[![Dependency Status][dependency-badge]][dependency]\n[![devDependency Status][devDependency-badge]][devDependency]\n[![downloads][downloads-badge]][npm-stat]\n\n![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)\n[![Angular 2 Style Guide][angular2-style-guide-badge]][style-guide]\n[![PRs Welcome][prs-badge]][prs]\n[![version][version-badge]][package]\n[![MIT License][license-badge]][license]\n\n\n\u003e A small standalone Angular2 plugin that allows your card component to either swipe left or right. To view the live demo, please visit \u003ca href=\"https://ng2-swipeable-card.firebaseapp.com/\" target=\"_blank\"\u003ehttps://ng2-swipeable-card.firebaseapp.com/ (You can also try to open from your mobile device  🎉)!\n\n\n## Installation\n`npm install --save ng2-swipeable-card`\n\n## Usage \nFor webpack consumers, first, import `SwipeableCardModule` to your entry `AppModule` file,\n```typescript\n  // Root app module file\n  import { NgModule } from '@angular/core';\n  import { BrowserModule } from '@angular/platform-browser';\n  import { SwipeableCardModule } from 'ng2-swipeable-card';\n  \n  import { AppComponent } from './app/';\n  \n  @NgModule({\n    imports: [\n      BrowserModule,\n      SwipeableCardModule\n      ...\n    ],\n    declarations: [AppComponent],\n    bootstrap: [AppComponent]\n  });\n```\nThen, import `ng2-swipeable-card` and `hammerjs` in your `vendor.ts` file,\n```typescript\n  // vendor.ts file\n  import '@angular/common';\n  import '@angular/core';\n  ...\n  \n  import 'hammerjs';\n  import 'ng2-swipeable-card';\n```\nLastly, 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.\n```typescript\n  import { Component, ViewEncapsulation } from '@angular/core';\n  \n  @Component({\n    selector: 'app',\n    encapsulation: ViewEncapsulation.None,\n    template:`\n    \u003cdiv class=\"swipeable-card-container\"\u003e\n      \u003cswipeable-card *ngFor=\"let card of cards; let idx = index;\"\n                      [cards]=\"cards\"\n                      [class.visible]=\"card.visible\"\n                      [class.hidden]=\"!card.visible\"\n      \u003e\n        \u003cimg swipeable-card-image src=\"{{ card.image }}\"\u003e\n        \u003cswipeable-card-content\u003e\n          \u003cswipeable-card-title\u003e\n            {{ record.name }}\n            \u003csmall\u003e{{ idx }}\u003c/small\u003e\n          \u003c/swipeable-card-title\u003e\n          \u003cp\u003e{{ record.content }}\u003c/p\u003e\n        \u003c/swipeable-card-content\u003e\n        \n        \u003cswipeable-card-actions\u003e\n          \u003cbutton swipeable-button (click)=\"like(card)\"\u003eLIKE\u003c/button\u003e\n          \u003cbutton swipeable-button (click)=\"share(card)\"\u003eSHARE\u003c/button\u003e\n        \u003c/swipeable-card-actions\u003e\n      \u003c/swipeable-card\u003e\n    \u003c/div\u003e\n    \n    `,\n  });\n  export class AppComponent {\n    // load any number of cards\n    cards = [\n      { name: 'Helen', image: 'http://semantic-ui.com/images/avatar/large/helen.jpg', visible: true, content: 'Helen: . Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat' },\n      { name: 'Elliot', image: 'http://semantic-ui.com/images/avatar/large/elliot.jpg', visible: false, content: 'Elliot: Lorem ipsum dolor sit amet, consectetur 3adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },\n      { name: 'Matt', image: 'http://semantic-ui.com/images/avatar/large/matt.jpg', visible: false, content: 'Matt: Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' }\n    ];\n    \n    // click `like` action\n    like(card): void {}\n    \n    // click `share` action\n    share(card): void {}\n  }\n```\n\n## Getting Started \n### Dependencies Prerequisites\n**Make sure you have Node version \u003e= 5.11 and NPM \u003e= 3**\n\u003e If you have `nvm` installed, which is highly recommended (`brew install nvm`) you can do a `nvm install --lts \u0026\u0026 nvm use` in `$` to run with the latest Node LTS. You can also have this `zsh` done for you [automatically](https://github.com/creationix/nvm#calling-nvm-use-automatically-in-a-directory-with-a-nvmrc-file). \n\nOnce you have those, you should install these globals with `npm install --global`:\n* `webpack` (`npm install --global webpack`)\n* `webpack-dev-server` (`npm install --global webpack-dev-server`)\n* `typings` (`npm install --global typings`)\n\n### Running Development\nOnce you have installed all prerequisites,\n\n* `fork` this repo\n* `clone` your fork\n* `nvm use` use the node version from .nvmrc\n* `npm install` to install all dependencies\n* `npm run typings` to install all related typings\n* `npm start` to run our demo app locally\n\n\u003e If you are having issues setting up your local development, try `rm -rf node_modules \u0026\u0026 npm cache clean`, and re-run `npm install`. If issues still persist, please file an [issue](https://github.com/JayKan/ng2-swipeable-card/issues). \n\n## Credits\n* [Angular2 Material Card Component](https://github.com/angular/material2)  \n\n## License\nMIT © [Jay Kan](https://github.com/JayKan)\n\n[angular2-style-guide-badge]: https://mgechev.github.io/angular2-style-guide/images/badge.svg\n[style-guide]: https://github.com/mgechev/angular2-style-guide\n[license-badge]: https://img.shields.io/npm/l/ng2-swipeable-card.svg?style=flat-square\n[license]: https://github.com/JayKan/ng2-swipeable-card/blob/master/LICENSE\n[dependency-badge]: https://david-dm.org/JayKan/ng2-swipeable-card/status.svg?style=flat-square\n[dependency]: https://david-dm.org/JayKan/ng2-swipeable-card\n[devDependency-badge]: https://david-dm.org/JayKan/ng2-swipeable-card/dev-status.svg?style=flat-square\n[devDependency]: https://david-dm.org/JayKan/ng2-swipeable-card?type=dev\n[downloads-badge]: https://img.shields.io/npm/dm/ng2-swipeable-card.svg?style=flat-square\n[npm-stat]: https://npm-stat.com/charts.html?package=ng2-swipeable-card\u0026from=2016-08-22\u0026to=2016-09-14\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: https://github.com/JayKan/ng2-swipeable-card/pulls\n[version-badge]: https://img.shields.io/npm/v/split-guide.svg?style=flat-square\n[package]: https://www.npmjs.com/package/ng2-swipeable-card\n[build-status-badge]: https://img.shields.io/travis/JayKan/ng2-swipeable-card.svg?style=flat-square\n[build-status]: https://travis-ci.org/JayKan/ng2-swipeable-card\n[dependencyci-badge]: https://dependencyci.com/github/JayKan/ng2-swipeable-card/badge\n[dependencyci]: https://dependencyci.com/github/JayKan/ng2-swipeable-card\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaykan%2Fng2-swipeable-card","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaykan%2Fng2-swipeable-card","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaykan%2Fng2-swipeable-card/lists"}