Select default option value from typescript angular 6

Question

I have a select html like this:

<select ng-model='nrSelect' class='form-control'>                                                                
    <option value='47'>47</option>
    <option value='46'>46</option>
    <option value='45'>45</option>
</select>

How can I select the default value from typescript for example 47 ?

Answer 1

You can do this:

<select  class='form-control'          (change)="ChangingValue($event)" [value]='46'>   <option value='47'>47</option>   <option value='46'>46</option>   <option value='45'>45</option> </select>  // Note: You can set the value of select only from options tag. In the above example, you cannot set the value of select to anything other than 45, 46, 47. 

Here, you can ply with this.

Answer 2

app.component.html

<select [(ngModel)]='nrSelect' class='form-control'>
  <option value='47'>47</option>
  <option value='46'>46</option>
  <option value='45'>45</option>
</select>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  nrSelect = 47
}

Answer 3

For reactive form, I managed to make it work by using the following example (47 can be replaced with other value or variable):

<div [formGroup]="form">
  <select formControlName="fieldName">
    <option
        *ngFor="let option of options; index as i"
        [selected]="option === 47"
    >
        {{ option }}
    </option>
  </select>
</div>