Photoshop Question posted in
The official user guide can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search