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
Post a Comment