# id based change the home page content in ionic5 and ionic-swipe-all

  <div id="block" swipeAll (swipeup)="swipeUp($event,'block3')"

(swipedown)="swipeDown($event)"></div>

npm i ionic-swipe-all

import { IonicSwipeAllModule } from 'ionic-swipe-all';

@NgModule({
  imports: [IonicSwipeAllModule],
})
export class AppModule {
}

home.page.html
 <div swipeAll
           (swipe)="swipeAll($event)"
           (swipeleft)="swipeLeft($event)"
           (swiperight)="swipeRight($event)"
           (swipeup)="swipeUp($event)"
           (swipedown)="swipeDown($event)"
      ></div>
home.page.ts
swipeAll(event: any): any {
        console.log('Swipe All', event);
    }

    swipeLeft(event: any): any {
        console.log('Swipe Left', event);
    }

    swipeRight(event: any): any {
        console.log('Swipe Right', event);
    }

    swipeUp(event: any): any {
        console.log('Swipe Up', event);
    }

    swipeDown(event: any): any {
        console.log('Swipe Down', event);
    }
home.module.ts
import { IonicSwipeAllModule } from 'ionic-swipe-all';
IonicSwipeAllModule
add tsconfig.json file:
 "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableIvy": false,---->this line required
  }
<ion-row class="sidemenutop"> 
        <ion-col size="12" (click)="scrollToLabel(data.sidemenu,data)"
        *ngFor="let data of sidemenudata">
          <ion-icon class="sideicon" [ngStyle]="data.selected && {'color': '#3880ff'}" name="{{data.name}}"></ion-icon>
        </ion-col>
        </ion-row> 

public sidemenudata = [
  
        {
        Id: "1",
        selected:true,
         name:"chatbubble-outline",
         sidemenu:"block1"
        },
         {
           Id: "2",
           selected: false,
          name: "share-social-outline",
          sidemenu:"block2"
        },   
        {
          Id: "3",
          selected: false,
          name: "heart-outline",
          sidemenu:"block3"
      },
      {
        Id: "4",
        selected:false,
        name:"apps-outline",
        sidemenu:"block4"
      },
    {
        Id: "5",
        selected:false,
        name: "book-outline",
        sidemenu:"block5"
      },   
     {
        Id: "6",
        selected:false,
        name: "camera-outline",
        sidemenu:"block6"
      },
     {
        Id: "7",
        selected:false,
        name: "cart-outline",
        sidemenu:"block5"
      },   
      {
        Id: "8",
        selected:false,
        name: "search-outline",
        sidemenu:"block6"
      },
       
  ]

 scrollToLabel(works,items) {
    this.sidemenudata.map(e=>{     
      if(e.Id==items.Id){
        console.log(e.Id,items.Id);
        if(e.selected==true){
          e.selected=false;
     
        }
        else{
          console.log("bhava")
          e.selected=true;
          }
      }
      else{      
        e.selected=false;
       
      }
      })
   
   if (items.Id == "8") {
    this.route.navigate(["/tabs/settings"])
    }
    else {
      var titleELe = document.getElementById(works);
      this.content.scrollToPoint(0, titleELe.offsetTop-0, 1000);
     
    }
  }