I have a dilemma with my two select options. The first select allows you to choose different car brands, while the second select dynamically populates specific models based on the selected brand using a GET request.
component.html
<mat-form-field appearance="fill">
<mat-label>Brand</mat-label>
<mat-select multiple formControlName="Brand" (selectionChange)="getModels($event)">
<mat-option *ngFor="let item of vehicles" [value]="item">{{item}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>Model</mat-label>
<mat-select multiple formControlName="VehicleCategory">
<mat-option *ngFor="let item of inputValue" [value]="item">{{item}}</mat-option>
</mat-select>
</mat-form-field>
The API call in the code above uses commas to separate each selected brand like this:
http://localhost:5001/api/Vehicle/Brands/BENTLEY,DACIA,AUDI,HONDA/Models
Here's the implemented logic for that functionality:
component.ts
getModels(form) {
// retrieve models
this.inputValue = this.newCampaignForm.get("Brand").value;
this.campaignService.getModels(this.inputValue).subscribe((data: any[])=>{
this.inputValue = data;
});
}
service.ts
public getModels(inputValue: string){
return this.http.get(this.API_SERVER + '/Vehicle' + '/Brands' + '/' + inputValue + '/Models');
}
My goal is to trigger a new API call each time an option is selected without using commas, resulting in individual calls like these:
http://localhost:5001/api/Vehicle/Brands/OPEL/Models
http://localhost:5001/api/Vehicle/Brands/BMW/Models