CODEWITHSUNDEEP
htmlangular
Snerps
Snerps

Reputation: 636

Angular 2: Default value dropdown selector

I'm trying to make a dropdown selector with Angular 2. I have an array of items and they all get displayed just fine and the two way data binding works. My only problem is that the dropdown selector has no default value. The selector field is empty when I load the page. The selector is in a edit view of my application, thats why I want to match the default value with the value of the "entityToEdit.cluster.id" object. Can anyone help me out with this?

<select [(ngModel)]="entityToEdit.cluster"
            name="clusterSelector">
      <option *ngFor="let data of clusterData" [ngValue]= "data">
        {{data.id}}
      </option>
</select>

Upvotes: 1

Views: 1059

Answers (2)

RemyaJ
RemyaJ

Reputation: 5526

Since you plan to show the selected id you should be setting the id as the ngmodel.
<select [(ngModel)]="entityToEdit.cluster['id']" 
                name="clusterSelector">
          <option *ngFor="let data of clusterData" [ngValue]= "data.id">
            {{data.id}}
          </option>
    </select>

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222582

Just set the default value on ngOnInit

ngOnInit() {
     this.entityToEdit.cluster ="defaultval";
}

Upvotes: 4

Related Questions