Search code examples
htmlangularangular-materialscss-lint

Swipe to delete in Angular 10

Hello my fellow developer. I would like just to ask for help for me to be to achieve the swipe delete feature on our Angular project.

Please see the screenshot below.

enter image description here

This is the code that was given to me to work with that feature.

      <div class="col-md-6 col-sm-6 col-xs-12" *ngFor="let relation of bookList" >
        <div class="" (click)="selectBookFor(relation)">
          <div class="">
            <div class="row introMain-wrapper">
              <div class="col-auto">
                <div class="introImg">
                  <img src="{{ relation && relation.image }}"  alt="user" (error)="setDefaultRelationUserPic($event, relation?.gender)">
                </div>
              </div>
              <div class="col">
                <div class="row">
                  <div class="col"><h5 class="card-title text">{{relation?.firstName}} {{relation?.lastName}}</h5></div>
                  <div class="col-auto"><span class="relation-text">{{relation?.relationship}}</span></div>
                </div>
                <h5 class="card-text">{{relation?.email}}</h5>
                <div class="outerdiv-text">
                    <span class="card-text">{{relation?.phone1}}</span>
                </div>
              </div>
            </div>
            <div class="line"></div>
          </div>
        </div>
      </div>

I've tried the following plugin:

  • mat-list-touch
  • swipe-angular-list

but it won't work when importing in the submodule and used in component features.Thanks in advance.

Solution

  • Good day fellow developers, thank you for all the answers. By the way, I used https://www.npmjs.com/package/swipe-angular-list as a solution to my problem.