Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 4 setting selected option in Dropdown

There are several questions about this and different answers but none of them really answers the question. So again:

Setting default of a Dropdown select by value isn't working in my case. Why? This is from the dynamic Form tutorial of Angular 4:

<select [id]="question.key" [formControlName]="question.key">       <option *ngFor="let opt of question.options" [value]="opt.key" [selected]="opt.selected">{{opt.selected+opt.value}}</option> </select> 

It doesn't select anything. Available options are:

  • trueaaa
  • falsebbb
  • falseccc

But static true:

<option ... [selected]="true">...</option> 

selects the last value (all true). It also works with a private variable boolvar = true and using it in [selected]="boolvar"

I don't understand the difference between the "opt" object and the class variable.

like image 263
Gregor Sklorz Avatar asked Sep 01 '17 13:09

Gregor Sklorz


People also ask

How to set default select option Angular?

Short Answer : use [selected]="isSelected" in your option tag!

What is select () in angular?

Overview. HTML select element with AngularJS data-binding. The select directive is used together with ngModel to provide data-binding between the scope and the <select> control (including setting default values). It also handles dynamic <option> elements, which can be added using the ngRepeat or ngOptions directives.

How do I bind a dropdown in angular 12?

Use unique identifiers as values for dropdown options, which in your case is category ids. Now pass the category id from the portal object to ngModel directive to bind the value to dropdown. You can use ngModelChange directive to listen for category id value changes and update the same in portal object.


2 Answers

If you want to select a value based on true / false use

[selected]="opt.selected == true"

 <option *ngFor="let opt of question.options" [value]="opt.key" [selected]="opt.selected == true">{{opt.selected+opt.value}}</option> 

checkit out

Angular 2 - Setting selected value on dropdown list

like image 137
Vijay ijardar Avatar answered Sep 25 '22 13:09

Vijay ijardar


Here is my example:

<div class="form-group">     <label for="contactMethod">Contact method</label>     <select          name="contactMethod"          id="contactMethod"          class="form-control"         [(ngModel)]="contact.contactMethod">         <option *ngFor="let method of contactMethods" [value]="method.id">{{ method.label }}</option>     </select> </div> 

And in component you must get values from select:

contactMethods = [     { id: 1, label: "Email" },     { id: 2, label: "Phone" } ] 

So, if you want select to have a default value selected (and proabbly you want that):

contact = {     firstName: "CFR",     comment: "No comment",     subscribe: true,     contactMethod: 2 // this id you'll send and get from backend } 
like image 34
Carnaru Valentin Avatar answered Sep 23 '22 13:09

Carnaru Valentin