{"id":15062132,"url":"https://github.com/leifermendez/swipe-angular-list","last_synced_at":"2025-08-09T04:12:42.642Z","repository":{"id":41891648,"uuid":"249183542","full_name":"leifermendez/swipe-angular-list","owner":"leifermendez","description":"You can now have a swipe effect on your angle application, with which you can place delete or edit options. Ideal for task list or contacts","archived":false,"fork":false,"pushed_at":"2022-04-24T11:18:33.000Z","size":92,"stargazers_count":34,"open_issues_count":6,"forks_count":8,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T08:48:26.083Z","etag":null,"topics":["angular","angular-cli","pwa","swipe","swipe-gestures"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/angular-ejzvpz","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leifermendez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-22T12:57:42.000Z","updated_at":"2024-10-15T02:57:11.000Z","dependencies_parsed_at":"2022-08-11T20:20:55.271Z","dependency_job_id":null,"html_url":"https://github.com/leifermendez/swipe-angular-list","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leifermendez%2Fswipe-angular-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leifermendez%2Fswipe-angular-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leifermendez%2Fswipe-angular-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leifermendez%2Fswipe-angular-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leifermendez","download_url":"https://codeload.github.com/leifermendez/swipe-angular-list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248198846,"owners_count":21063626,"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","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","angular-cli","pwa","swipe","swipe-gestures"],"created_at":"2024-09-24T23:30:56.883Z","updated_at":"2025-04-10T09:55:07.206Z","avatar_url":"https://github.com/leifermendez.png","language":"TypeScript","readme":"\n![](https://img.shields.io/npm/dy/swipe-angular-list.svg)\n![](https://img.shields.io/github/stars/leifermendez/swipe-angular-list)\n![](https://img.shields.io/github/license/leifermendez/swipe-angular-list)\n# Angular Swiper List (swipe-angular-list)\n\nYou can now have a swipe effect on your Angular application, with which you can place delete or edit options. Ideal for task list or contacts.\n\n__[VER DEMO](https://stackblitz.com/edit/angular-ejzvpz)__\n\n\u003ca href=\"https://www.buymeacoffee.com/leifermendez\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\" alt=\"Buy Me A Coffee\" style=\"height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;\" \u003e\u003c/a\u003e\n\n\u003cp  align=\"center\"\u003e\n\u003csmall\u003ePreview\u003c/small\u003e\n\u003cbr\u003e\n\u003cimg src=\"https://i.imgur.com/WGotbov.png\"  alt=\"Preview 1\" /\u003e\n\u003c/p\u003e\n\n----\n\n\u003cp  align=\"center\" style=\"display:flex;justify-content: space-between;width:100%;align-content: center;\"\u003e\n\u003cb\u003eExamples\u003c/b\u003e\u003cbr\u003e\n\n\u003cimg height=\"400\" src=\"https://i.imgur.com/qMXkbXm.gif\"  alt=\"Preview 1\" /\u003e\n\u003cimg height=\"400\" src=\"https://i.imgur.com/LspDKT6.gif\"  alt=\"Preview 2\" /\u003e\n\u003cimg height=\"400\" src=\"https://i.imgur.com/orpXyIv.gif\"  alt=\"Preview 3\" /\u003e\n\u003c/p\u003e\n\n\n### Install\n\n`npm i swipe-angular-list@latest --save`\n\n### Import\n\n__main.ts__\n\nImport `hammerjs`\n\n```typescript\n\nimport './polyfills';\nimport 'hammerjs'; // \u003c ----- ********************************  IMPORT\nimport { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\n```\n\n__app.module.ts__\n\n```typescript\n\nimport { BrowserModule, HammerModule } from \"@angular/platform-browser\";\nimport { NgModule } from \"@angular/core\";\nimport { AppComponent } from \"./app.component\";\n\nimport { SwipeAngularListModule } from \"swipe-angular-list\"; // \u003c------ IMPORT\n\n@NgModule({\n  declarations: [AppComponent],\n\n  imports: [\n    BrowserModule,\n    HammerModule, // \u003c ----- ******************************** IMPORTANT ******************\n    SwipeAngularListModule, // \u003c ----- ******************************** IMPORTANT ******************\n  ],\n\n  providers: [],\n\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n\n\n```\n__style.css__\n\u003e The scroll doesn't work on mobile devices?\n```css\n* {\n  touch-action: pan-y !important;\n}\n```\n  \n\n### Use\n\nUse in your component\n\n```typescript\n\nimport { Component } from \"@angular/core\";\n\n@Component({\n  selector: \"app-root\",\n\n  templateUrl: \"./app.component.html\",\n\n  styleUrls: [\"./app.component.css\"],\n})\nexport class AppComponent {\n  title = \"for-test\";\n\n  list = [\n    {\n      id: 1,\n      title: \"Realizar la tarea asignada!\",\n      subTitle: \"9:00pm\",\n    },\n    {\n      id: 2,\n      title: \"Visitar al perro en casa de tu amiga\",\n      subTitle: \"9:00pm\",\n    },\n    {\n      id: 3,\n      title: \"Llamar al doctor\",\n      subTitle: \"9:00pm\",\n    },\n    {\n      id: 4,\n      title: \"Buscar el auto en el taller\",\n      subTitle: \"9:00pm\",\n    }\n  ];\n\n  action = (a) =\u003e {\n    console.log(a);\n  };\n  \n  swipeCallback = (a) =\u003e {\n    console.log('Callback Swipe', a);\n  }\n}\n\n```\n\n### Template\n\n```html\n\n\u003cdiv\u003e\n  \u003ch3 style=\"text-align: center;\"\u003eTask List\u003c/h3\u003e\n\n  \u003cdiv\u003e\n    \u003csw-item-list\n      *ngFor=\"let item of list\"\n      [inside]=\"item\"\n      [item-class]=\"'list-custom'\"\n      [editTemplate]=\"editTemplate\"\n      [trashTemplate]=\"trashTemplate\"\n      (callback)=\"action($event)\"\n      (swipeCb)=\"swipeCallback($event)\"\u003e\n    \u003c/sw-item-list\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n!\u003c-- Defined yout template for icon button (edit)--\u003e\n\n\u003cng-template #editTemplate\u003e\n  \u003ci class=\"fas fa-edit\"\u003e\u003c/i\u003e\n\u003c/ng-template\u003e\n\n!\u003c-- Defined yout template for icon button (trash)--\u003e\n\n\u003cng-template #trashTemplate\u003e\n  \u003ci class=\"fas fa-trash\"\u003e\u003c/i\u003e\n\u003c/ng-template\u003e\n\n```\n\n### Options\n\n__item__ structure defined :\n\n``` text\n{\n   \"id\":1,\n   \"title\":\"Realizar la tarea asignada!\",\n   \"subTitle\":\"9:00pm\"\n}\n\n```\n### Inputs\n| Name   |      Default      |  Description |\n|:----------:|:-------------:|:------:|\n| item-class |  (string) '' | name of style class custom |\n| show-mark |   (boolean) true   |   boolean show icon done or not |\n| editTemplate | (TemplateRef) or null |  template for edit button |\n| trashTemplate | (TemplateRef) or null | template for trash button | \n| markTemplate | (TemplateRef)  | template for icon check template | \n| notMarkTemplat | (TemplateRef) | template for icon not check template |\n  \n### Output\n| Name   |      Default      |  Description |\n|:----------:|:-------------:|:------:|\n| (callback) |  (function) | function callback click option |\n| (swClick) |  (function) | click on item |\n| (swipeCb) |  (function) | function callback swipe item | \n\n\n``` html\n\n\u003csw-item-list\n  *ngFor=\"let item of list\"\n  [inside]=\"item\"\n  [item-class]=\"'list-custom'\"\n  [show-mark]=\"true\"\n  (swClick)=\"click(item)\"\n  (swipeCb)=\"swipeCallback($event)\"\n  [editTemplate]=\"editTemplate\"\n  [trashTemplate]=\"trashTemplate\"\n  [markTemplate]=\"defaultMark\"\n  [notMarkTemplate]=\"defaultNotMark\"\n  (callback)=\"action($event)\"\n\u003e\n\u003c/sw-item-list\u003e\n\n```\n\n\n#### Example completed\n```html \n\u003cdiv\u003e\n  \u003ch3 style=\"text-align: center;\"\u003eTASK LIST\u003c/h3\u003e\n  \u003cdiv\u003e\n    \u003csw-item-list\n      *ngFor=\"let item of list\"\n      [inside]=\"item\"\n      [item-class]=\"'list-custom'\"\n      [show-mark]=\"false\"\n      [disable-mark]=\"item?.disable\"\n      (swClick)=\"click(item)\"\n      [editTemplate]=\"editTemplate\"\n      [trashTemplate]=\"trashTemplate\"\n      [markTemplate]=\"defaultMark\"\n      [customTemplate]=\"customTemplateSrc\"\n      [notMarkTemplate]=\"defaultNotMark\"\n      (callback)=\"action($event)\"\u003e\n    \u003c/sw-item-list\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cng-template #editTemplate\u003e\n  \u003ci class=\"fas fa-edit\"\u003e\u003c/i\u003e\n\u003c/ng-template\u003e\n\n\u003cng-template #trashTemplate\u003e\n  \u003ci class=\"fas fa-trash\"\u003e\u003c/i\u003e\n\u003c/ng-template\u003e\n\n\u003cng-template #defaultMark\u003e\n  \u003ci class=\"far fa-check-circle\"\u003e\u003c/i\u003e\n\u003c/ng-template\u003e\n\n\u003cng-template #defaultNotMark\u003e\n  \u003ci class=\"far fa-circle\"\u003e\u003c/i\u003e\n\u003c/ng-template\u003e\n\n\u003cng-template #customTemplateSrc let-item=\"item\" let-id=\"id\"\u003e\n  \u003cdiv style=\"display: flex;\"\u003e\n    \u003cdiv style=\"padding-right: 10px;\"\u003e\n      \u003cimg\n        style=\"width: 60px; height: 60px; border-radius: 60px;\"\n        [src]=\"'https://api.adorable.io/avatars/400/' + id + '.png'\"\n        alt=\"\"/\u003e\n    \u003c/div\u003e\n    \u003cdiv\u003e\n      \u003ch3 style=\"margin-top: 0; margin-bottom: 0;\"\u003eLorem, ipsum dolor.\u003c/h3\u003e\n      \u003csmall style=\"color: gray; font-weight: 500;\"\u003e\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Non,optio.\n      \u003c/small\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/ng-template\u003e\n\n```\n","funding_links":["https://www.buymeacoffee.com/leifermendez"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleifermendez%2Fswipe-angular-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleifermendez%2Fswipe-angular-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleifermendez%2Fswipe-angular-list/lists"}