push multiple data in array(select and disselect items in array)

 <ion-content>

<h1 class="h1 margin">Following</h1>

<ion-row>

  <ion-col size="12" *ngFor="let data of followingdata" (click)="select(data)">

    <div  class="newcssbg"  [ngStyle]="{'background-image': 'url(' + data.img +  ')'}">

      <div class="overlay">

      <p class="innertext">{{data.text}}       <ion-icon *ngIf="data.selected" style="color:#fff;float:right;" name="checkmark-circle-outline"></ion-icon>

      </p>

   </div> 

   </div>

  </ion-col>

</ion-row>

</ion-content>


<!-- [ngStyle]="data.selected  && {'border': '2px solid green'}" -->



ts


 select(data) {

    // this.followingdataarray.push(data);

    this.followingdata.map(e => { 

      

      if(e.id==data.id){

        console.log(e.id,data.id);

        if(e.selected==true){

          e.selected = false;

          let index = this.followingdataarray.indexOf(data);

          console.log(index);

          this.followingdataarray.splice(index, 1);

          console.log(this.followingdataarray);

          //  this.followingdataarray.splice( this.followingdataarray.indexOf( this.followingdataarray.find(item => item.id == data.id)), 1);

        }

        else{

          console.log("bhava")

          e.selected = true;

          this.followingdataarray.push(data);

          console.log(this.followingdataarray);

          }

      }

      else{      

        // e.selected=false;

       

      }

    })

    // if (data.text == "Cars") {

    //   // this.route.navigate(["/cars/0"]);


    // }

    // else {

    //   // this.route.navigate(["/home"]);


    // }

}



 public followingdata = [

    { img: "assets/following/animals.jpg", text: "Cars",id:"1",selected:false },

    { img: "assets/following/animals.jpg", text: "Animals",id:"2",selected:false },

    { img: "assets/following/nature.jpg", text: "Mental Health",id:"3",selected:false },

    { img: "assets/following/art.jpg", text: "Art",id:"4",selected:false },

    { img: "assets/following/style.jpg", text: "Style",id:"5",selected:false },

  ]

  followingdataarray: any = [];

 

Comments

Popular posts from this blog

How to Add Firebase Analytics to Your NativeScript Mobile App

sidemenu refresh through events