JIYIK CN >

selectIs an HTML tag that contains nan option subtag that contains a value attribute.

This tutorial guide will provide how to select default option value from TypeScript in AngularJs if the user does not select any specific defined value.

ValueSelecting default values ​​through attributes in AngularJS

We can define a default value valuefor the tag by setting the property within the array brackets and assigning it a hard-coated value.select

selectThe default value of a label can only be assigned from the option value. This value can also be processed valueusing a function called in the change event .valueChanging

The argument passed to valueChangingthe function can specify a default option.

<select  class='form-handler'
        (change)="valueChanging($event)" [value]='69'>
  <option value='68'>68</option>
  <option value='69'>69</option>
  <option value='70'>70</option>
</select>

Output:

By default, the default option is selected . It will help 选择if you remember to only put the value as the default option in the option value.select

ngModelSelecting default values ​​with selectors in AngularJS

We can use ngModela selector, a directive in AngularJs, which binds input, select, textarea, and usersaves the value in a variable.

selectThe tag contains a directive with selectValuea attribute ngModel, and in app.component.tsthe file, it is assigned the optionsame default value as inside the tag.

app.component.html：

<select [(ngModel)]='selectValue' 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  {
  selectValue:number = 47;
}

Output: