Pass data on parent change angular 7

user_8462785 0
Viewed 1238

I have two dropdown list and I need to pass both of their values to updateGraph function in the component when either one of the two changes

   <div class="card-body" (change)="updateGraph($event)">
                        <div class="row">
                            <label>City</label>
                            <select data-id="selects1" class="browser-default custom-select">
                                <label>City</label>
                                <option selected>Select a city</option>
                                <option *ngFor="let city of cities" [value]="city">{{ city }} </option>
                            </select>
                        </div>
                        <div class="row">
                            <label>Scale</label>
                            <select data-id="selects" class="browser-default custom-select">
                                <option selected>Scale</option>
                                <option *ngFor="let scale of scales" [ngValue]="scale.value">{{ scale.Name }}
                                </option>
                            </select>
                        </div>
                        <div class="row">
                            <mdb-date-picker name="mydate" [options]="myDatePickerOptions" [placeholder]="'Selected date'"
                                [(ngModel)]="model" required></mdb-date-picker>
                        </div>
                    </div>
angular7 angular
2 Answers

I think the issue is with 

(change)="updateGraph($event)"

being placed on a div element, as divs do not have onChange events, unless the card-body is somehow providing that.

I would move that call to both of the select elements, so it will be triggered on either of the select's onChange events.

You can also pass in whatever variable you need to, or just reference them from the .ts file.

Option #1 looks like it would be, moving it to the selects and then using:

(change)="updateGraph(city, scale.Name)"

Option #2 on the .ts file you could just reference this.city and this.scale.Name in your updateGraph function.

But make sure the (change) is on both of the select elements

user_89466270

You have to apply to updateGraph on both select elements like below

<select data-id="selects1" (change)="updateGraph($event.target.value)"> class="browser-default custom-select">
                                <label>City</label>
                                <option selected>Select a city</option>
                                <option *ngFor="let city of cities" [value]="city">{{ city }} </option>
                            </select>

If you want to bind a property like id as value 

<option *ngFor="let city of cities" [value]="city.id">

So $event.target.value will be the selected id

if you want to reuse the same method for both dropdown , just pass some constantvalue as a parameter 

 updateGraph('scale',$event.target.value)  //for scale 
 updateGraph('city',$event.target.value) //city

from the component you can check a condition

updateGraph(type,value){
if(type==='scale'){
  //value for scale 
}
else if(type==='city'){
//value for city
}
}

Stackblitz Demo

user_16685010
Related