<ion-list *ngFor="let d of data" (click)="toggleDetails(d)" >
<ion-list-header class="item" padding-left ><ion-icon color="primary" item-right [name]="d.iconp"></ion-icon>
{{d.Product}}
</ion-list-header>
<div *ngIf="d.showDetails" class="show"><br>
<ion-item >
<ion-label class="l">Type:</ion-label>
<ion-select text-left [(ngModel)]="Type">
<ion-option *ngFor="let type of skuType" >{{type}}</ion-option>
</ion-select>
</ion-item>
<ion-item >
<ion-label class="l">Size:</ion-label>
<ion-select [(ngModel)]="Size" >
<ion-option *ngFor="let size of skuSize">{{size}}</ion-option>
</ion-select>
</ion-item>
<ion-row>
<ion-col text-center>
<button ion-button (click)=addToCart(d.Product,Type,Size) round>Add</button>
</ion-col>
</ion-row>
</div>
</ion-list>TS
this.skuSize= ['Large', 'Medium', 'Small'];
this.product=['A','B']
this.type=['x','y','z']
//function cloasing or showing div
toggleDetails(data) {
if (data.showDetails){
data.showDetails = false;
data.iconp = 'ios-add-circle-outline';
}
else{
data.showDetails = true;
data.iconp = 'ios-remove-circle-outline';
}
whatever value i am selecting in one list is showing that value in second select option list .
what could be the way to complete this task