ng2-bootstrap-list-swipe

Description

A directive that adds swipe left / delete button behavior to the standard Bootstrap list-group-item.

Bootstrap 3:

Bootstrap 4:

Requirements

Bootstrap 3:

$ npm install bootstrap@3 --save

OR Bootstrap 4:

$ npm install bootstrap@^4.0.0-alpha.6 --save

Installation

To install this library, run:

$ npm install ng2-bootstrap-list-swipe --save

and then from your Angular AppModule:

import { SwipeModule } from 'ng2-bootstrap-list-swipe';
 
@NgModule({
  ...
  imports: [
    ...
    SwipeModule.forRoot()
  ],
  ...
})
export class AppModule { }

Angular CLI Config

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "../node_modules/ng2-bootstrap-list-swipe/styles.css",
  "styles.css"
],

Template

Bootstrap 3:

<div class="list-group">
    <div bs3-list-swipe-item *ngFor="let item of items; let i = index" (deleteCallback)="deleteItem(i)">{{ item.name }}</div>
</div>

OR Bootstrap 4:

<div class="list-group">
    <div bs4-list-swipe-item *ngFor="let item of items; let i = index" (deleteCallback)="deleteItem(i)">{{ item.name }}</div>
</div>

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

License

MIT © Paul Hofferkamp