Angular select default selected select element

Question

I have following template

  <select  [(ngModel)] = "selectedLocation">
    <option *ngFor="let location of allLocationNames" [ngValue]="location">{{location.name}}</option>
  </select>

The component has following ngOnInit

export class TestComponent implements OnInit {
  @Input() public guest: Guest;
  public allLocationNames: Location[] = []
  public selectedLocation: Location;


  constructor(private apiService: ApiService) {
  }

  ngOnInit() {
    this.allLocationNames = this.apiService.allLocationNames;
    this.selectedLocation = this.guest.location;
  }
}

I would like the default selected element to be the one set in this.selectedLocation when the component loads. Right now the selected element in the drop down list seems to be a blank entry.

I am on Angular 5

this is a expected behavior from Angular, It does not know what will be the value of **selectedLocation** by default, you should give the default value in the beginning ! — SHOHIL SETHIA, Nov 08 '17 at 13:55
I see that your `location` objects have a `name` property. Do they have an `id` property? You could bind to that property instead of binding to the object itself (e.g. `[ngValue]="location.id"` and `[(ngModel)]="selectedLocationId"`). Or you could bind to the name, if you are sure that they are unique. — ConnorsFan, Nov 08 '17 at 13:55
initialize **this.selectedLocation** which you used as **ngModel** for 2-way binding in typescript before using it ! Since if you have not initialized it, Angular does not know what to show as the first attribute in dropdown ! — SHOHIL SETHIA, Nov 08 '17 at 14:01
Please post your full code, As only scenario when dropdown shows empty item in first place is not initializing the ngModel attribute — SHOHIL SETHIA, Nov 08 '17 at 14:04
Hey did either answer help you, or do you need further assistance? :) — AT82, Nov 18 '17 at 08:17

score 0 · Answer 1 · answered Nov 09 '17 at 17:25

Your guest.location is a string, whereas each location is an object. If you in this case want to capture the whole object, i.e use [ngValue]="location", you'd want to compare the string value you are getting in guest.location and assign the object that matches, to your selectedLocation, instead of just having a string value there.

So it can be done like:

ngOnInit() {
  this.allLocationNames =  this.apiService.allLocationNames;
  this.selectedLocation = 
       this.allLocationNames.find(x => x.name === this.guest.location)
}

now you have the whole object in your selectedLocation.

DEMO

score 0 · Answer 2 · answered Mar 11 '19 at 19:07

0

check once...

    <option value="undefined" disabled selected hidden>select</option>
    <option *ngFor="let example2 of example2s" value="{{example2.value}}">{{example.exampleName}}</option>
</select>

Thanks.

answered Mar 11 '19 at 19:07

Arun Kumar

21
3

score -1 · Answer 3 · answered Nov 08 '17 at 14:14

-1

You need to bind to selected property of option element. Just use [selected]= "location === selectedLocation" in your options element and your are good to go.

<option *ngFor="let location of arrayList" [selected]="location === selectedItem" >{{location.name}}</option>

answered Nov 08 '17 at 14:14

Ankit Kapoor

1,615
12
18

I tried that. The selected one is still just blank. I do get my correct list of elements in the drop down as before. – isADon Nov 08 '17 at 14:19
set [ngValue]="location.name" – Ankit Kapoor Nov 08 '17 at 14:23
Same state than before – isADon Nov 08 '17 at 14:25
Are you purposefully adding ngModel and ngValue as mine is working good without them. – Ankit Kapoor Nov 08 '17 at 14:29
How else am I suppose to get the 2-way binding and get the selected value as an object? see https://stackoverflow.com/questions/35945001/binding-select-element-to-object-in-angular-2 – isADon Nov 08 '17 at 14:32
Well if you ask me I'm simply using `` Here selectedItem is any of your location.name values. – Ankit Kapoor Nov 08 '17 at 14:33
This works but how do I retrieve the selected location object (not string) from this? – isADon Nov 08 '17 at 14:37
Correct me if I'm wrong but are you asking how do you retrieve selected item at any time later? – Ankit Kapoor Nov 08 '17 at 14:45
Yes. How do I know which location object was selected. I don't see any 2-way/1-way binding in your example – isADon Nov 08 '17 at 14:46
For two way you should use NgModel ` – Ankit Kapoor Nov 08 '17 at 14:51
Now we are back to what I had before and what resulted in a blank element being selected. Thanks anyway – isADon Nov 08 '17 at 14:55
I just edited it **[(ngModel)]="selectedItem.name"** – Ankit Kapoor Nov 08 '17 at 14:56

Angular select default selected select element

3 Answers3