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

Install

npm i swipe-angular-list@latest --save

Import

main.ts

Import hammerjs

import './polyfills';
import 'hammerjs'; // < ----- ********************************  IMPORT
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

app.module.ts

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?

* {
  touch-action: pan-y !important;
}

Use

Use in your component

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

<div>
  <h3 style="text-align: center;">Task List</h3>

  <div>
    <sw-item-list
      *ngFor="let item of list"
      [inside]="item"
      [item-class]="'list-custom'"
      [editTemplate]="editTemplate"
      [trashTemplate]="trashTemplate"
      (callback)="action($event)"
      (swipeCb)="swipeCallback($event)">
    </sw-item-list>
  </div>
</div>

!<-- Defined yout template for icon button (edit)-->

<ng-template #editTemplate>
  <i class="fas fa-edit"></i>
</ng-template>

!<-- Defined yout template for icon button (trash)-->

<ng-template #trashTemplate>
  <i class="fas fa-trash"></i>
</ng-template>

Options

item structure defined :

{
   "id":1,
   "title":"Realizar la tarea asignada!",
   "subTitle":"9:00pm"
}

Inputs

Output

<sw-item-list
  *ngFor="let item of list"
  [inside]="item"
  [item-class]="'list-custom'"
  [show-mark]="true"
  (swClick)="click(item)"
  (swipeCb)="swipeCallback($event)"
  [editTemplate]="editTemplate"
  [trashTemplate]="trashTemplate"
  [markTemplate]="defaultMark"
  [notMarkTemplate]="defaultNotMark"
  (callback)="action($event)"
>
</sw-item-list>

Example completed

<div>
  <h3 style="text-align: center;">TASK LIST</h3>
  <div>
    <sw-item-list
      *ngFor="let item of list"
      [inside]="item"
      [item-class]="'list-custom'"
      [show-mark]="false"
      [disable-mark]="item?.disable"
      (swClick)="click(item)"
      [editTemplate]="editTemplate"
      [trashTemplate]="trashTemplate"
      [markTemplate]="defaultMark"
      [customTemplate]="customTemplateSrc"
      [notMarkTemplate]="defaultNotMark"
      (callback)="action($event)">
    </sw-item-list>
  </div>
</div>

<ng-template #editTemplate>
  <i class="fas fa-edit"></i>
</ng-template>

<ng-template #trashTemplate>
  <i class="fas fa-trash"></i>
</ng-template>

<ng-template #defaultMark>
  <i class="far fa-check-circle"></i>
</ng-template>

<ng-template #defaultNotMark>
  <i class="far fa-circle"></i>
</ng-template>

<ng-template #customTemplateSrc let-item="item" let-id="id">
  <div style="display: flex;">
    <div style="padding-right: 10px;">
      <img
        style="width: 60px; height: 60px; border-radius: 60px;"
        [src]="'https://api.adorable.io/avatars/400/' + id + '.png'"
        alt=""/>
    </div>
    <div>
      <h3 style="margin-top: 0; margin-bottom: 0;">Lorem, ipsum dolor.</h3>
      <small style="color: gray; font-weight: 500;">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Non,optio.
      </small>
    </div>
  </div>
</ng-template>