In order to have the value of "Select an option" in all select boxes, I initially set it for the first one like this:
<select class="form-control" [(ngModel)]="selectedPrototypeSelector" (ngModelChange)="onPrototypeChange()">
<option *ngFor="#p of prototypes" [value]="p.selector">
{{ p.selectorName }}
</option>
</select>
Then, in the component, I defined a private variable as follows:
private selectedPrototypeSelector: string = "Select an option";
I also created a fake object in my code file named expression.array.ts:
{
selector: "Select an option",
selectorName: "Select an option",
constraints: "Select an option"
},
However, I would like to apply this setting to all select boxes. Here is the template for the second select box:
<select class="form-control" [(ngModel)]="expression.constraint">
<option *ngFor="#constraint of prototype.constraints" [value]="constraint">
{{ constraint }}
</option>
</select>
In this case, I bind it to the 'expression' object. How can I resolve this?
This is the desired outcome visualized using Photoshop:
https://i.sstatic.net/ydGbh.png
To gain a better understanding, here is a Plunker link for reference: Plunker.