binding two selects angular

Question

I have two selects
The first one is for regions and the second one for cities The first one is filled with regions Now i have a methode that brings cities by the id of the region .

I dont know how to get the idregion and put it into the params function

This is my first select

  <div class="form-group">
                    <label for="">Region</label>
                    <select class="form-control" 
                        [(ngModel)]="region" name="Region">
                        <option></option>
                        <option *ngFor="let region of
                            objectKeys(dropDownList2)|keys"
                            [value]="dropDownList2[region].idRegion">
                            {{dropDownList2[region].nomRegion}}
                        </option>

                    </select>

                </div>

My services :

 getville() {
    return this.http.get(this.urltest + 'Villes');
  }

 
  getRegion() {
    return this.http.get(this.urltest + 'Regions');
  }



  GetRegionVille(idRegion) {

    return this.http.get(this.urltest + 'Villes/GetRegionVille/' + idRegion);
  }

My component.ts :

 getidregion() {
    this.res.getRegion().subscribe(R => {
      this.dropDownList2 = R as any;
     
    });
  }


 getregionville() {

    this.res.GetRegionVille(****i don t know how to get the idregion**** )
      .subscribe(response => {
        this.dropDownList = response as any;


      });
  }

this is my function

  // GET: api/Villes
        [HttpGet("GetRegionVille/{id}")]
        public async Task<IActionResult> GetRegionVille([FromRoute] int id)
        {
            var req = from v in _context.Villes
                      join r in _context.Regions
            on v.IdRegion equals r.IdRegion
                      where r.IdRegion == id
                      select new {v.NomVille };
            return Ok(req);
        }

My select of the cities :

<div class="form-group">
                    <label for="">Ville</label>
                    <select class="form-control" name="Ville"
                      
                        [(ngModel)]="ville">
                        <option></option>

                        <option *ngFor="let ville of objectKeys(dropDownList) |
                            keys"
                            [value]="dropDownList[ville].idVille">
                            {{dropDownList[ville].nomVille}}
                        </option>

                    </select>

score 0 · Answer 1 · answered Aug 03 '20 at 04:42

The selected value will be in region variable as you state [(ngModel)]="region" and you can use (ngModelChange)="onChange($event)" to get an event when value changes

I am not sure if using two way data binding with (ngModelChange) is efficient, so please see this answer How can I get new selection in "select" in Angular 2?

binding two selects angular

1 Answers1