Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
angular-weblineindia-swipe
Advanced tools
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.
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.
Preview
Examples
npm i angular-weblineindia-swipe --save
import { BrowserModule, HammerModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { SwipeAngularListModule } from "angular-weblineindia-swipe"; // <------ IMPORT
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HammerModule, // < ----- ******************************** IMPORTANT ******************
SwipeAngularListModule // < ----- ******************************** IMPORTANT ******************
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
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);
};
}
<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)"
>
</sw-item-list>
</div>
</div>
!<-- Define your template for icon button (edit)-->
<ng-template #editTemplate>
<i class="fas fa-edit"></i>
</ng-template>
!<-- Define your template for icon button (trash)-->
<ng-template #trashTemplate>
<i class="fas fa-trash"></i>
</ng-template>
item structure defined :
{
id: 1,
title: 'Realizar la tarea asignada!',
subTitle: '9:00pm'
}
item-class name of style class custom.
show-mark boolean show icon done or not
editTemplate template for edit button
trashTemplate template for trash button
markTemplate template for icon check template
notMarkTemplate template for icon not check template
(callback) function callback click option
(swClick) click on item
<sw-item-list
*ngFor="let item of list"
[inside]="item"
[item-class]="'list-custom'"
[show-mark]="true"
(swClick)="click(item)"
[editTemplate]="editTemplate"
[trashTemplate]="trashTemplate"
[markTemplate]="defaultMark"
[notMarkTemplate]="defaultNotMark"
(callback)="action($event)"
>
</sw-item-list>
<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>
We 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.
Detailed changes for each release are documented in CHANGELOG.md.
angular-weblineindia-swipe is inspired by angular-swipe-actions.
angularjs-touch, angular-gestures, angularjs, angular-pwa, angular-slide, angular-swipe-list, swipelist, angular-swiper, swipe-list
FAQs
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.
The npm package angular-weblineindia-swipe receives a total of 0 weekly downloads. As such, angular-weblineindia-swipe popularity was classified as not popular.
We found that angular-weblineindia-swipe demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.