Angular 2 how do I set begin value of a select box?

I want to have in all my select boxes the value of "Select an option" I have fixed 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>

and in the component:

private selectedPrototypeSelector: string = "Select an option";

And I created a fake object in my expression.array.ts like this:

 {
        selector: "Select an option",
        selectorName: "Select an option",
        constraints: "Select an option"
    },

But I would like to set it for all the select boxes and here is the template for the second second select box:

<select class="form-control" [(ngModel)]="expression.constraint">
     <option *ngFor="#constraint of prototype.constraints" [value]="constraint">
         {{ constraint }}
     </option>
</select>

Where I bind it to the object expression, how can I fix this?

This is what i want to achieve I did this in photoshop:

enter image description here

Here is a Plunker to get a better overview.

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

You could set the expected value in the constraint property of the expression object: addExpression() { let expression = new Expression(); expression.constraint = 'Select an option'; // This could also be set using another variable this.expressions.push(expression); } Edit Since the selectedPrototypeSelector property of the expression component is used to select the value, you need define it as an input @Input() selectedPrototypeSelector: string = 'Select an option'; and provide the expected value when using the component: <expression *ngFor="#expression of expressions" selectedPrototypeSelector="arrivalDate" <------ [prototypes]="prototypes" [expression]="expression" [expressions]="expression.children"> </expression> See this plunkr: https://plnkr.co/edit/LjfiY4?p=preview.

Jason
Guest

Add an initial value for selectedPrototypeSelector on your component.

For example you could have:

  public barList: string[] = [
    'bar1',
    'bar2',
    'bar3'
  ];

and then:

foo: Foo = new Foo(
  this.barList[0];
)

where:

class Foo {
  constructor(
    bar: string
  ) {}
}

So, on your template in order to have the first element of barList as initial value for the select box you must:

<select [ngModel]="foo.bar">
  <option  *ngFor="#b of barList" [value]="b">{{b}}</option>
</select>