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 }}

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 }}

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.

Leave a Reply

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

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:


Add an initial value for selectedPrototypeSelector on your component.

For example you could have:

  public barList: string[] = [

and then:

foo: Foo = new Foo(


class Foo {
    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]="">
  <option  *ngFor="#b of barList" [value]="b">{{b}}</option>