Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/leifermendez/swipe-angular-list
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
https://github.com/leifermendez/swipe-angular-list
angular angular-cli pwa swipe swipe-gestures
Last synced: 3 months ago
JSON representation
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
- Host: GitHub
- URL: https://github.com/leifermendez/swipe-angular-list
- Owner: leifermendez
- License: gpl-3.0
- Created: 2020-03-22T12:57:42.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-04-24T11:18:33.000Z (over 2 years ago)
- Last Synced: 2024-09-29T07:41:19.606Z (4 months ago)
- Topics: angular, angular-cli, pwa, swipe, swipe-gestures
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/angular-ejzvpz
- Size: 89.8 KB
- Stars: 33
- Watchers: 2
- Forks: 7
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular Swiper List (swipe-angular-list)
You 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.
__[VER DEMO](https://stackblitz.com/edit/angular-ejzvpz)__
Preview
----
Examples
### Install
`npm i swipe-angular-list@latest --save`
### Import
__main.ts__
Import `hammerjs`
```typescript
import './polyfills';
import 'hammerjs'; // < ----- ******************************** IMPORT
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
```
__app.module.ts__
```typescript
import { BrowserModule, HammerModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { SwipeAngularListModule } from "swipe-angular-list"; // <------ IMPORT
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HammerModule, // < ----- ******************************** IMPORTANT ******************
SwipeAngularListModule, // < ----- ******************************** IMPORTANT ******************
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
__style.css__
> The scroll doesn't work on mobile devices?
```css
* {
touch-action: pan-y !important;
}
```
### Use
Use in your component
```typescript
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
title = "for-test";
list = [
{
id: 1,
title: "Realizar la tarea asignada!",
subTitle: "9:00pm",
},
{
id: 2,
title: "Visitar al perro en casa de tu amiga",
subTitle: "9:00pm",
},
{
id: 3,
title: "Llamar al doctor",
subTitle: "9:00pm",
},
{
id: 4,
title: "Buscar el auto en el taller",
subTitle: "9:00pm",
}
];
action = (a) => {
console.log(a);
};
swipeCallback = (a) => {
console.log('Callback Swipe', a);
}
}
```
### Template
```html
Task List
!<-- Defined yout template for icon button (edit)-->
!<-- Defined yout template for icon button (trash)-->
```
### Options
__item__ structure defined :
``` text
{
"id":1,
"title":"Realizar la tarea asignada!",
"subTitle":"9:00pm"
}
```
### Inputs
| Name | Default | Description |
|:----------:|:-------------:|:------:|
| item-class | (string) '' | name of style class custom |
| show-mark | (boolean) true | boolean show icon done or not |
| editTemplate | (TemplateRef) or null | template for edit button |
| trashTemplate | (TemplateRef) or null | template for trash button |
| markTemplate | (TemplateRef) | template for icon check template |
| notMarkTemplat | (TemplateRef) | template for icon not check template |
### Output
| Name | Default | Description |
|:----------:|:-------------:|:------:|
| (callback) | (function) | function callback click option |
| (swClick) | (function) | click on item |
| (swipeCb) | (function) | function callback swipe item |
``` html
```
#### Example completed
```html
TASK LIST
![]()
Lorem, ipsum dolor.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non,optio.
```