How to call an angular function within another function? - html

Question

I have three select options in my html page. Based on the three selecting values I need to write a value in another text box.
<select (change)="aaFilter($event.target.value)" class="form-control">
<option *ngFor="let type of aa" [value]="type.value">
{{type.display}}
</option>
</select>
<select (change)="bbFilter($event.target.value)" class="form-control">
<option *ngFor="let type of bb" [value]="type.value">
{{type.display}}
</option>
</select>
<select (change)="ccFilter($event.target.value)" class="form-control">
<option *ngFor="let type of cc" [value]="type.value">
{{type.display}}
</option>
</select>
So I have Onchange function in every select box. Now In my typescript file my
aaFilter(selectedaa:string){
console.log('value is ',selectedaa);
}
Likewise I have written three functions. But based on this values I need to set up a value in textbox.
headerName(){
//Here I need to take up the threee selected values from drop down & do some function based on that.
}
How can that be done in angular 6 & typescript?

Answer 1

In component:
Public selectedValues = [];
aaFilter(value, index){
this.selectedValues[index] = value;
this.updateModelInput();
}
bbFilter(value, index){
this.selectedValues[index] = value;
this.updateModelInput();
}
ccFilter(value, index){
this.selectedValues[index] = value;
this.updateModelInput();
}
updateModelInput(){
if(this.selectedValues.length === 3){
// UPDATE THE VALUE IN TEXT BOX
}
}
From Template, you can pass value 0, 1, 2 as 2nd parameter in change method.

Answer 2

Well, you haven't bound anything to the select options have you?
<select
[(ngModel)] ="filterA"
(change) ="headerName()"
class ="form-control">
<option *ngFor="let type of aa" [value]="type.value">
{{type.display}}
</option>
</select>
<select
[(ngModel)] ="filterB"
(change) ="headerName()"
class ="form-control">
<option *ngFor ="let type of bb" [value]="type.value">
{{type.display}}
</option>
</select>
<select
[(ngModel)] ="filterC"
(change) ="headerName()"
class ="form-control">
<option *ngFor="let type of cc" [value]="type.value">
{{type.display}}
</option>
</select>
In your component file:
headerName()
{
/* Do whatever this function is supposed to do whenever one of the
filters is changed. The variables filterA, filterB and filterC will
now always have the most recent values for you to operate on */
}