Set the selected value of the drop down in Angular 2

Question

vatCodeList is an error with string codes.

Example: ['34u' , '23' ,'tt']

Need to set the selected value there .

<select class="custom-select" formControlName="vatCode">             
            <option *ngFor="let i of vatCodeList">{{i}}</option>          
</select>

Answer 1

Inside your *.component.ts

public vatCode: any;

Inside your *.component.ts you can set the value of vatCode to one of the values contained within vatCodeList, this will update the selected value.

Inside the *.component.html

<select class="custom-select" formControlName="vatCode" [(ngModel)]="vatCode">             
  <option *ngFor="let i of vatCodeList">{{i}}</option>          
</select>

Answer 2

You can bind the value property like this

<option [value]="i" *ngFor="let i of vatCodeList">{{ i }}</option>

Answer 3

You can try to put an expression to the option tag to make an option selected

<select class="custom-select" formControlName="vatCode">             
            <option *ngFor="let i of vatCodeList" {{i == vatCode?'selected':'' }}>{{i}}</option>          
</select>

The variable should reference the value of the InputControl. Using reactive forms it would be easy to extract the value and put it into expression.

---

The easiest way to bind the element to the model with ngModel but you can check if this solution helps.