Unable to select value in option (Angular dropdown list.)

set selected value of dropdown in angularjs
angularjs dropdown default selected value
angular 6 select option selected value
angularjs dropdown selected value
set selected value of dropdown in angularjs ng-options
angular 6 select options
how to bind selected value in dropdownlist in angularjs
angularjs set selected option value

I have searched far and wide. What I got from other answers is that I need to use [selected] if I want to select a particular option.

It does not seem to be working. Why? Here is what I have:

<ngx-datatable-column name="status" prop="operationStatus" [flexGrow]="1">
    <ng-template let-value="value2" let-row="row" let-rowIndex="rowIndex" gx-datatable-cell-template>
          <select class="geraeteStatus" [(ngModel)]="selectableGerateStatus">
             <option *ngFor="let e of selectableGerateStatus" [ngValue]="e" 
                 [selected]="e.id === value2">
                {{e.id}}
             </option>
          </select>
   </ng-template>
</ngx-datatable-column>

I am sure that the value of e.id equals that of value2 at least once per iteration. However it just does not work. Actually I can put whatever I wish (e.id === 2, or even 'true') into [selected] it does not have any effect. I have no idea what I am missing. Any answer is highly appreciated.

There is no need to use [selected] in your options

just do some changes like below

Component.html

<select class="geraeteStatus" (change)="onChange($event)" [(ngModel)]="selectedStatus">
   <option *ngFor="let e of selectableGerateStatus" [ngValue]="e.id">
     {{e.id}}
   </option>
</select>

but here you need to match ngValue with your ngModel then only it will be selected.

Component.ts

selectedStatus: string;

onChange(status: string) {
   this.selectedStatus = status;
}

For more info about select options check here

ngOptions, When an item in the <select> menu is selected, the array element or object property By default, ngModel watches the model by reference, not value. collection, ngOptions won't be able to set the selection, because the objects are not identical. <select ng-options="item as item.label for item in items track by item.id"� In this Angular tutorial, I’m going to share with you how to work with Angular 7|8|9 Select Dropdown. We’ll learn to work with Angular select dropdown with Reactive Forms. In this tutorial i will show you how you can create, implement and validate select dropdown in Angular app.

Bind the option with value instead of ngValue as below.

<select class="my-status" [(ngModel)]="myModel.status">
         <option [ngValue]="null" selected disabled> Select Status </option>
         <option *ngFor="let e of selectableGerateStatus" [value]="e">
            {{e.id}}
         </option>
</select>

ngSelected, Blog � Twitter � Google+ � Feature & Bug Tracker � Mailing List � IRC � Gitter Sets the selected attribute on the element, if the expression inside ngSelected is truthy . is necessary because we cannot use interpolation inside the selected attribute. on the options, as ngModel will set the select value and selected options. The options property returns the collection of all the option elements in the <select> dropdown list. The elements are sorted according to the source code of the page. The index found before it can be used with this property to get the selected element. This option’s value can be found by using the value property.

I present how I solved the problem. Note that I am quite new to angular, and my approach might be rudimentary. I also want to give credit to @Eliseo who highlighted the fact that ngModel and selected must not be used together. That's whay I got rid of the former and used selected only:

component.html

 <select class="geraeteStatus" (change)="changeGaerateStatus($event, rowIndex)">
          <option *ngFor="let e of selectableGerateStatus" [selected]="value == e.id">
               {{e.label}}
            </option>
 </select>

and the .ts file:

    this.selectableGerateStatus = [
  {
    id: 0,
    label: BaseDataComponent.NEW
  }, {
    id: 1,
    label: BaseDataComponent.ACTIVE
  }, {
    id: 2,
    label: BaseDataComponent.DEINSTALLED
  }
]

It solved my problem, but it might not be the best approach. Feel free to comment.

Select, <mat-select> is a form control for selecting a value from a set of options, similar to the native mode, its value will be a sorted list of all selected values rather than a single value. In order to facilitate easily styling the dropdown panel, <mat- select> has a link Error: Cannot change multiple mode of select after initialization. Hi Stepanyan, I have two dropdown select elements in html file, for example states and citys. I would like to set an specific value to each one, but both dropdown are related, when I pick a state

Angular ng-selected Directive, In HTML, you cannot set the selected attribute to false (the presence of the selected attribute makes the element selected, regardless of its value). Syntax. < option� Angular 8.0 is out and earlier I posted about creating an Angular 8 app with Visual Studio 2019, which will help you to get started with Angular 8.In this post, we’ll see how to bind select dropdown list in Angular 8 app by extending the same app.

Unable to select a value in p-dropdown form PrimeNG (not visible , Unable to select a value in p-dropdown form PrimeNG (not visible) #3019 Cypress is working fine on my Angular project, only on my dropdowns I have an issue. out retrying: cy.click() failed because this element is not visible: > <option <ul class="ui-dropdown-items ui-dropdown-list ui-widget-content� Angular 8/9 Select Dropdown Tutorial with Reactive Forms is going to be discussed today. We’ll learn to work with Select dropdown in Angular 8 with Reactive Forms. We are going to create and validate select dropdown HTML element using Reactive forms.

[Solved] How do you get the value of the selected option in angular , It should look like this,. Hide Copy Code. <select [(ngModel)]="selected" name=" status" placeholder="select"� 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

Comments
  • if you're using [(ngModel)] you must NOT use [selected]. The problem is that you're using [ngValue]="e". So, the variable "selectableGenerateStatus", is an object -really you need that it's was the same object. Use [ngValue]="e.id" to work
  • OK, I got it. I removed 'selected'. I changed to the following: <option *ngFor="let e of selectableGerateStatus" [ngValue]="e.id"> {{e.label}}</option> . But it still does not work
  • thanks gnaesh045.Unfortunately it still does not work.