dynamically populate option set by value in angular4

Question

I have 2 option set (picklist) and I would like to populate one of them based on the other option set. for example if I have the arrays in the ts file:

   carsArray: { id: number, name: string }[] = [
    { "id": 1, "name": "Car1" },
    { "id": 2, "name": "Car2" },
    { "id": 3, "name": "Car3" }
  ];

  carModulesArray:{ id: number, carId:number ,name: string }[] = [
    { "id": 1, "carId":1, "name": "Module1" },
    { "id": 2, "carId":1, "name": "Module2" },
    { "id": 3, "carId":1,"name": "Module3" },
    { "id": 4, "carId":2,"name": "Module4" },
    { "id": 5, "carId":3,"name": "Module5" }
  ];

and in the html template

  <select id='cars'>
      <option *ngFor="let c of carsArray" 
      value="{{c.id}}">{{c.name}}</option>
    </select>

    <select id='modules'>
        <option *ngFor="let m of carModulesArray" 
        value="{{m.id}}">{{m.name}}</option>
      </select>

How can I make the second picklist (modules) be dynamicly populated by the first picklist (cars) so after the user select car 1 he see modules 1,2 and 3 only and if he select car 2 (or 3) he see module 2 (or module 3)

Thanks in advance for the help

score 1 · Answer 1 · answered Aug 31 '17 at 17:19

With help form Alex this is the code that I wrote, there is room for improvement but I will html:

<div class="form-group">
                <label for="carsId" class="col-sm-2 control-label">Cars</label>
                <div class="col-sm-10">
                  <select id='carsId' (change)="onCarsChange($event)">
                    <option *ngFor="let c of carsArray" 
                    value="{{c.id}}">{{c.name}}</option>
                  </select> 
                </div>
              </div>

              <div class="form-group">
                <label for="moduleId" class="col-sm-2 control-label">Cars</label>
                <div class="col-sm-10">
                  <select id='moduleId'>
                    <option *ngFor="let m of filteredCarsModule" 
                    value="{{m.id}}">{{m.name}}</option>
                  </select> 
                </div>
              </div>

and inside the typescript file filteredCarsModule:{ id: number, carId:number ,name: string }[];

   carsArray: { id: number, name: string }[] = [
    { "id": 1, "name": "Car1" },
    { "id": 17, "name": "Car2" },
    { "id": 3, "name": "Car3" }
  ];

  carModulesArray:{ id: number, carId:number ,name: string }[] = [
    { "id": 1, "carId":1, "name": "Module1" },
    { "id": 2, "carId":1, "name": "Module2" },
    { "id": 3, "carId":1,"name": "Module3" },
    { "id": 4, "carId":17,"name": "Module4" },
    { "id": 5, "carId":3,"name": "Module5" }
  ];


  ngOnInit() {
    this.filteredCarsModule = this.getCarsModuleByType(1);
  }

  onCarsChange(carValue) {
    this.filteredCarsModule = this.getCarsModuleByType(carValue.target.value);
  }

  getCarsModuleByType(carValue):{ id: number, carId:number ,name: string }[]
  {
    return this.carModulesArray.filter(module=>module.carId==carValue);
  }

score 0 · Accepted Answer · answered Aug 29 '17 at 16:25

0

Since you are working with arrays, you can use the filter() method to clear out the options you don't want from the lists.

You just need to filter one list or the other based on the value selected.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

answered Aug 29 '17 at 16:25

Alex Beugnet

4,003
4
23
40

Hello Alex, thanks for the reply but the question is not how to filter the array but how to bind the on change event and change the options in angular – Jonathan Yeger Aug 29 '17 at 16:32
Look at this post : It contains your wildest dreams ! https://stackoverflow.com/questions/33700266/how-can-i-get-new-selection-in-select-in-angular-2 – Alex Beugnet Aug 29 '17 at 16:36
1

Thanks for the help Alex, I will write what I did in a different comment – Jonathan Yeger Aug 31 '17 at 17:16

dynamically populate option set by value in angular4

2 Answers2