Angular 2, set default value to select option

angular 7 dropdown default selected value
angular 4 dropdown default selected value
angular 6 select default value
angular 8 dropdown default selected value
angular 7 select default value
set default value in dropdown angular 7
angular 2 dropdown set selected value
angular 2 dropdown default selected value

I try to add a default value to an option. It will be like a kind of placeholder and I use this method to do it. In pure HTML it work, but if I try to use *ngFor of angular 2 attribute, it doesn't select anything.

Here my code that I use in pure HTML:

  <select name="select-html" id="select-html">
    <option value="0" selected disabled>Select Language</option>
    <option value="1">HTML</option>
    <option value="2">PHP</option>
    <option value="3">Javascript</option>
  </select>

And using Angular template:

 <select name="select" id="select" [(ngModel)]="selectLanguage">
    <option *ngFor="let item of selectOption" 
      [selected]="item.value==0" 
      [disabled]="item.value==0">{{item.label}}</option>
  </select>

The class is

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

@Component({
  moduleId: module.id,
  selector: 'app-form-select',
  templateUrl: 'default.component.html'
})
export class DefaultComponent {
  private selectOption: any;
  constructor() {
    this.selectOption = [
      {
        id: 1,
        label: "Select Language",
        value: 0
      }, {
        id: 2,
        label: "HTML 5",
        value: 1
      }, {
        id: 3,
        label: "PHP",
        value: 2
      }, {
        id: 4,
        label: "Javascript",
        value: 3
      }
    ]
  }
}

I want Select Languageto be selected as a default value. It's disabled but not selected.

How can I select it as a default value?

Live example


update

4.0.0-beta.6 added compareWith

<select [compareWith]="compareFn"  [(ngModel)]="selectedCountries">
    <option *ngFor="let country of countries" [ngValue]="country">
        {{country.name}}
    </option>
</select>

compareFn(c1: Country, c2: Country): boolean {
   return c1 && c2 ? c1.id === c2.id : c1 === c2;
} 

this way the instance assigned to selectedCountries doesn't need to be the identical object, but a custom comparison function can be passed, for example to be able to match an different object instance with identical property values.

original

If you want to use an object as value you need to use [ngValue] on the option element.

  <select name="select" id="select" [(ngModel)]="selectLanguage">
    <option *ngFor="let item of selectOption" [ngValue]="item"
      [disabled]="item.value==0">{{item.label}}</option>
  </select>

When selectLanguage has an options value assigned [(ngModel)]="..." will this one make the one selected by default:

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

@Component({
  moduleId: module.id,
  selector: 'app-form-select',
  templateUrl: 'default.component.html'
})
export class DefaultComponent {
  private selectOption: any;
  constructor() {
    this.selectOption = [
      {
        id: 1,
        label: "Select Language",
        value: 0
      }, {
        id: 2,
        label: "HTML 5",
        value: 1
      }, {
        id: 3,
        label: "PHP",
        value: 2
      }, {
        id: 4,
        label: "Javascript",
        value: 3
      }
    ];
    this.selectLanguage = this.selectOption[0];
  }
}

Angular 2, set default value to select option, update. 4.0.0-beta.6 added compareWith <select [compareWith]="compareFn" [( ngModel)]="selectedCountries"> <option *ngFor="let country of� Learn how to use them in Angular. We will show you how to set the Default Value for the select. Listen to the Select option change event and react to it. Dynamically update the Dropdown list option & Dynamically Set Value etc. We will cover both Reactive Forms & Template-driven forms. Applies to: Angular 2 to the latest edition of i.e. Angular 8.


I find it nicer to remove the default option from the selectOption array and specifying the default unselectable option separately.

<select name="select" id="select" [(ngModel)]="selectLanguage">
  <option [ngValue]="undefined" disabled>Select Language</option>
  <option
         *ngFor="let item of selectOption"
         [value]="item.value"
  >
    item.label
  </option>
</select>

Set default value for <select> in Angular 2 | by Penghui Li, 2. set the selected attribute like this without <form>: <select formControlName=" sex"> <option value="" [selected]="isSelected"> Please choose� To set the DOM default: along with *ngFor, use a conditional statement in the <option>'s selected attribute. To set the Control's default: use its constructor argument. Otherwise before an onchange when the user re-selects an option, which sets the control's value with the selected option's value attribute, the control value will be null. script:


Try below sample code for this: Replace yourValue with whatever value you want to select default

<select  placeholder="country" >
       <option *ngFor="let country of countriesList" [ngValue]="country" [selected]="country.country_name == yourValue" >
             {{country.country_name}}
       </option>
</select>

How to set selected option dynamically in Angular 6, In Angular as a OPTION value we can use not only string literals, but After this we will have our SELECT with 'Canada' selected as default. I also needed to be able to conditionally set a default selected option. but you are using a complex type and the angular will search key/value to set in your view.


<select class="form-control" [(ngModel)]="someList.key" name="key"  #key="ngModel" required>
     <option value="undefined" selected disabled>Select option</option>
     <option *ngFor="let data of someList" value="{{data.key}}">{{data.key}</option>
 </select>

How to assign and make default selection of Drop down (select , Hi Every one, I have drop down in Edit page of Angular 2 App. when we [( ngModel)] to the option's value that you want to set it as selected. We can also use 'selected' attribute in <option> tag of select element to set default value selected in select box. 1.1. Dynamically Set Value using FormGroup.setValue setValue sets the value in each and every form control of FormGroup. Find the example to set select option selected using setValue dynamically. user-reactive.component.ts


Angular Select Option Set Selected Dynamically, Bind the data to the select list in Angular 5/4 using ngFor 2. To get the selected value from Duration: 8:42 Posted: Feb 24, 2018 I did it just like in these examples. Tried to set the value of the mat-select to the value of one of the mat-options. But failed. My mistake was to do [(value)]="someNumberVariable" to a numeric type variable while the ones in mat-options were strings. Even if they looked the same in the template it would not select that option.


Angular 5: How to Bind/Get selected value/Set Default in SelectList , Only object identity is checked. update. Angular added support for compareWith , that makes it easier to set the default value when [ngValue] is used (for� Angular Material Select is created using <mat-select> which is a form control for selecting a value from a set of options. To add elements to Select option, we need to use <mat-option> element and to bind value with <mat-option>, use value property of it. To set and get a value for <mat-select>, use value, ngModel, formControl and


Angular 2 Dropdown Options Default Value, Set default value for <select> in Angular 2+ Template Driven Forms. Template- Driven.html. <select [ngModel]="field ||''">. <option value="">Select field</option>. The selected values can be fetched using userForm.get('technologies'). Default Selected Value We can set values to select options as usual by using setValue or patchValue of FormGroup.