how to show default selected option in select box

Question

I have searched similar kind of links ,but no luck.

I have an array of objects which i need to show as a dropdown and i have to select one default option .My object contains value,selected properties.If value and selected properties are matched then it has to be the default selected option.My dropdown Array look like this...

[
    {
      "selected": "samsung",
      "resource_Attribute_ID": 486,
      "value": "hp",
      "type": "String"
    },
    {
      "selected": "samsung",
      "resource_Attribute_ID": 486,
      "value": "samsung",
      "type": "String"
    },
    {
      "selected": "samsung",
      "resource_Attribute_ID": 486,
      "value": "dell",
      "type": "String"
    }
  ]

and HTML code like this..

<select formControlName="controlFordropdwn" >
            <option value="" disabled  hidden>Select</option>
            <option *ngFor="let type of dropdown"   [value]="type.value" [selected]='type.value == type.selected'  >
              {{type.value}}
            </option>
          </select>

Any response which is related to this will help me alot. Thanks to you inAdvance

Answer 1

I have not tested your code, but something like this should work:

<select formControlName="controlFordropdwn">
    <option *ngIf="type.value == type.selected">{{type.value}}</option> <!--I added this line -->
    <option *ngFor="let type of dropdown" [value]="type.value" [selected]='type.value == type.selected'>
        {{type.value}}
    </option>
</select>

Answer 2

You need to create a variable to store the value being selected. Then when you initialize the component, assign the default value to that variable. Inside your html you need to include [(ngModel)] .

*.component.ts

public selectedValue: any; //not sure what the value type is

constructor() {
    this.selectedValue = "default value";
}

*.component.html

<select formControlName="controlFordropdwn" [(ngModel)]="selectedValue">
    <option value="" disabled  hidden>Select</option>
    <option *ngFor="let type of dropdown" [value]="type.value" [selected]='type.value == type.selected'>
        {{type.value}}
    </option>
</select>

Answer 3

i have this scenario which i have worked, hope it will help

 HTML:
 <select class="form-control">
 <option [attr.selected]="index == 2 ? true : null" *ngFor="let segment of segmentation; 
 let index=index;" [ngValue]="index">{{segment.name}}</option>
</select>

TS:
segmentation = [
{ "name": "name 1", "columns": [ { "index": 0}]},
{ "name": "name 2", "columns": [{"index": 1}]},
{ "name": "name 3","columns": [ { "index": 2}]}
]

Answer 4

With reactive forms, the selected attribute is completely ignored, so what you need to do, is to set the value to your form control instead, which can be found by use .find() and remove the selected from your template.

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    controlFordropdwn: ['']
  });
  let item = this.dropdown.find(x => x.value === x.selected);
  this.myForm.controls.controlFordropdwn.setValue(item.value)
 }

Now your select will work correctly.

StackBlitz