Data passed by ionChange using ion-select does not get passed as input to the api - Ionic

Question

Hello guys I am working on this food delivery app where a user inputs an Delivery Circle in a ion-select component, where he/she stays and then I fire another api by taking the value of delivery circle (for eg. 1,2,3...etc) in another ion-select component which is the area or locality he/she stays and populating the ion-select on basis of delivery circle selected.

Here I am able to pass the value of delivery circle and i have consoled the value and its fine. But when I try to pass the id as data to the next api it goes blank...

Here is my html file

<ion-content padding class="bgpage">
<div class = "col-md-6">
<ion-item>
  <ion-label>Delivery Circle</ion-label>
  <ion-select [(ngModel)]="data" (ionChange) = "delAreaCircle(del_cir)">
    <ion-option  *ngFor = "let data of circleResponse" [value]="data['del_c_id']">{{data['del_c_name']}}</ion-option>
  </ion-select>
</ion-item>
</div>
<ion-item>
  <ion-label>Area / Near by Locality</ion-label>
  <ion-select [(ngModel)]="area_loc">
    <ion-option value="1">St. cruz</ion-option>
  </ion-select>
</ion-item>
</ion-content>

This is my .ts file function.

delCircle(){
let circleUrl = 'http://url/folder/filename.php';
let circleData: Observable<any> = this.http.get(circleUrl);
circleData.subscribe( data => { this.circleResponse = data.json();
this.circleResponse = this.circleResponse; 
console.log(this.circleResponse);

});
}

delAreaCircle(id){
let headers = new Headers();
headers.append('Content-Type', 'application/json');

console.log("Inside Location Cordinates",id)
this.del_id = id;
let options = new RequestOptions({ headers: headers });
let circlePassData = {"del_c_id":this.del_id}
console.log("dataPassed",this.circlePassData);
this.http.post('http://url/folder/filename.php', circlePassData , options)
.subscribe(data => {this.circlePassDataFetch = data.json();

console.log("dataReached",this.circlePassDataFetch);

});  
}

Answer 1

Change the Parameter in your (ionChange) function to $event. This will pass the value of the selected option to your function.

<ion-content padding class="bgpage">
<div class = "col-md-6">
<ion-item>
  <ion-label>Delivery Circle</ion-label>
  <ion-select [(ngModel)]="data" (ionChange) = "delAreaCircle($event)">
    <ion-option  *ngFor = "let data of circleResponse" [value]="data['del_c_id']">{{data['del_c_name']}}</ion-option>
  </ion-select>
</ion-item>
</div>
<ion-item>
  <ion-label>Area / Near by Locality</ion-label>
  <ion-select [(ngModel)]="area_loc">
    <ion-option value="1">St. cruz</ion-option>
  </ion-select>
</ion-item>
</ion-content>