{"id":19311978,"url":"https://github.com/weblineindia/angular-swipe-list","last_synced_at":"2026-02-16T12:05:05.472Z","repository":{"id":57179413,"uuid":"280408712","full_name":"weblineindia/Angular-Swipe-List","owner":"weblineindia","description":"An AngularJS based Swipe List component which provides swipe effects in your Angular application. It also allows you to change button options like you can place delete / edit / info buttons as per your requirements.","archived":false,"fork":false,"pushed_at":"2020-07-17T12:38:31.000Z","size":152,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-17T22:06:54.453Z","etag":null,"topics":["angular","angular-components","angular-libraries","angular-pwa","angular-slider","angular-swipelist","angularjs","angularjs-components","angularjs-library","angularjs-swipe","reusable-components","swipe","swipe-effects","swipe-gestures","swipelistview"],"latest_commit_sha":null,"homepage":"https://www.weblineindia.com/software-development-resources.html","language":"JavaScript","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/weblineindia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-07-17T11:37:53.000Z","updated_at":"2023-11-23T12:45:56.000Z","dependencies_parsed_at":"2022-09-14T02:10:33.967Z","dependency_job_id":null,"html_url":"https://github.com/weblineindia/Angular-Swipe-List","commit_stats":null,"previous_names":["weblineindia/angularjs-swipe-list"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FAngular-Swipe-List","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FAngular-Swipe-List/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FAngular-Swipe-List/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FAngular-Swipe-List/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weblineindia","download_url":"https://codeload.github.com/weblineindia/Angular-Swipe-List/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240415216,"owners_count":19797599,"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-components","angular-libraries","angular-pwa","angular-slider","angular-swipelist","angularjs","angularjs-components","angularjs-library","angularjs-swipe","reusable-components","swipe","swipe-effects","swipe-gestures","swipelistview"],"created_at":"2024-11-10T00:31:52.964Z","updated_at":"2026-02-16T12:05:05.412Z","avatar_url":"https://github.com/weblineindia.png","language":"JavaScript","readme":"# AngularJS - Swipe List\n\nAn AngularJS based Swipe List component which provides swipe effects in your Angular application. It also allows you to change button options like you can place delete / edit / info buttons as per your requirements.\n\n\n## Table of contents\n\n- [Demo](#demo)\n- [Installation](#installlation)\n- [Getting started](#getting-started)\n- [Usage](#usage)\n- [Options](#options)\n- [Example completed](#example-completed)\n- [Want to Contribute?](#want-to-contribute)\n- [Collection of Components](#collection-of-components)\n- [Changelog](#changelog)\n- [Credits](#credits)\n- [License](#license)\n- [Keywords](#Keywords)\n\n## Demo\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### Installation\n\n`npm i angular-weblineindia-swipe --save`\n\n### Getting started\n\n```typescript\nimport { BrowserModule, HammerModule } from \"@angular/platform-browser\";\nimport { NgModule } from \"@angular/core\";\nimport { AppComponent } from \"./app.component\";\n\nimport { SwipeAngularListModule } from \"angular-weblineindia-swipe\"; // \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### Usage\n\nUse in your component\n\n```typescript\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\n      title: \"Realizar la tarea asignada!\",\n\n      subTitle: \"9:00pm\"\n    },\n\n    {\n      id: 2,\n\n      title: \"Visitar al perro en casa de tu amiga\",\n\n      subTitle: \"9:00pm\"\n    },\n\n    {\n      id: 3,\n\n      title: \"Llamar al doctor\",\n\n      subTitle: \"9:00pm\"\n    },\n\n    {\n      id: 4,\n\n      title: \"Buscar el auto en el taller\",\n\n      subTitle: \"9:00pm\"\n    }\n  ];\n\n  action = a =\u003e {\n    console.log(a);\n  };\n}\n```\n\n### Template\n\n```html\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    \u003e\n    \u003c/sw-item-list\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n!\u003c-- Define your 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-- Define your 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### Options\n\n**item** structure defined :\n\n```text\n\n{\n\nid: 1,\n\ntitle: 'Realizar la tarea asignada!',\n\nsubTitle: '9:00pm'\n\n}\n\n```\n\n**item-class** name of style class custom.\n\n**show-mark** boolean show icon done or not\n\n**editTemplate** template for edit button\n\n**trashTemplate** template for trash button\n\n**markTemplate** template for icon check template\n\n**notMarkTemplate** template for icon not check template\n\n**(callback)** function callback click option\n\n**(swClick)** click on item\n\n```html\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  [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#### Example completed\n\n```html\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      [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)\"\n    \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=\"\"\n      /\u003e\n    \u003c/div\u003e\n\n    \u003cdiv\u003e\n      \u003ch3 style=\"margin-top: 0;margin-bottom: 0;\"\u003eLorem, ipsum dolor.\u003c/h3\u003e\n\n      \u003csmall style=\"color:gray;font-weight:500;\"\n        \u003eLorem ipsum dolor sit amet consectetur adipisicing elit. Non,\n        optio.\u003c/small\n      \u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/ng-template\u003e\n```\n\n## Want to Contribute?\n\n- Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).\n- [Fork it](http://help.github.com/forking/).\n- Create new branch to contribute your changes.\n- Commit all your changes to your branch.\n- Submit a [pull request](http://help.github.com/pull-requests/).\n\n---\n\n## Collection of Components\n\nWe have built many other components and free resources for software development in various programming languages. Kindly click here to view our [Free Resources for Software Development](https://www.weblineindia.com/software-development-resources.html).\n\n---\n\n## Changelog\n\nDetailed changes for each release are documented in [CHANGELOG.md](./CHANGELOG.md).\n\n## Credits\n\nangular-weblineindia-swipe is inspired by [angular-swipe-actions](https://www.npmjs.com/package/angular-swipe-actions).\n\n## License\n\n[MIT](LICENSE)\n\n[mit]: https://github.com/weblineindia/AngularJS-Swipe-List/blob/master/LICENSE\n\n## Keywords\n\nangularjs-touch, angular-gestures, angularjs, angular-pwa, angular-slide, angular-swipe-list, swipelist, angular-swiper, swipe-list","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweblineindia%2Fangular-swipe-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweblineindia%2Fangular-swipe-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweblineindia%2Fangular-swipe-list/lists"}