Angular 2.0 and TypeScript - Populate <select> options from multi-dimensional array objects

Question

I would like to populate the <select name="selectmodel"> <option> from a nested array of objects based on the selection of the <select name="selectmake"> <option> element.

Here is the multi-dimensional array:

muscleCars = [
    {
      id: 1, name: "Chevrolet", models: [
        { model: "Camaro" },
        { model: "Corvette" }
      ]
    },
    {
      id: 2, name: "Dodge", models: [
        { model: "Charger" },
        { model: "Challenger" },
        { model: "Viper" }
      ]
    },
    {
      id: 3, name: "Ford", models: [
        { model: "GT" },
        { model: "Mustang" }
      ]
    }
];

This is the HTML

//select for Make:
<select name="selectmake" [(ngModel)]="makeListFilter">
    <option *ngFor="let muscleCar of muscleCars" [ngValue]="muscleCar.name">{{muscleCar.name}}</option>
</select>

//select for Model:
<select name="selectmodel" [(ngModel)]="modelListFilter">
    <option *ngFor="let muscleCar of muscleCars" [ngValue]="muscleCar.models">{{muscleCar.models}}</option>
</select>

So, basically when you select Chevrolet for example, I would like to have the second element populated with Camaro and Corvette.

Currently, the second select element is populated with an array [object Object] for each make, but can't figure out how to dig this deeper.

Here is a plunk: https://embed.plnkr.co/0eEIJg5uzL6KsI70wWsC/

Any help would be appreciated.

Answer 1

This is how your HTML should look like:

<select name="selectmake" [(ngModel)]="makeListFilter">
    <option *ngFor="let muscleCar of muscleCars" [ngValue]="muscleCar">{{muscleCar.name}}</option>
</select>

<select name="selectmodel" [(ngModel)]="modelListFilter">
    <option *ngFor="let carModel of makeListFilter?.models" [ngValue]="carModel.model">{{carModel.model}}</option>
</select>

So, what's happening here is that selected value of selectmake dropdown is binded to makeListFilter and second dropdown selectmodel is populated based on selected value of first dropdown. You will notice I binded the whole Object that is selected in first dropdown using ngValue directive so it can be used to populate second dropdown. Another interesting thing you'll notice is Elvis operator (?) I used in second dropdown - it is used to tell second dropdown to populate itself only after value is selected in first dropdown, this is necessary to avoid getting error for iterating through an undefined value. If you don't want to use Elvis operator, you can use *ngIf directive to prevent getting mentioned error, but that means that second dropdown will appear only after you select something in the first dropdown:

<select *ngIf="makeListFilter" name="selectmodel" [(ngModel)]="modelListFilter">
    <option *ngFor="let carModel of makeListFilter.models" [ngValue]="carModel.model">{{carModel.model}}</option>
</select>