CODEWITHSUNDEEP
javascriptangulartypescriptselect
Born2Code
Born2Code

Reputation: 137

Bind and fetch dropdown list value in typescript and Angular2

This question was asked many times and couldn't help me with my problem. Not sure whats wrong with the approach and hope some fresh "eyes"

Here is my dropdownlist binding in HTML: I am binding programName which is a string to both value and text properties.

<select [ngModel]="selectedObject">
   <option *ngFor="let p of programs" value= {{p.programName}}>
         {{p.programName}}
   </option>
</select>

In my .ts file, here is the what i am doing to bind the default value to the "select"

 loadData(pList: IProgram[]) {
    this.programs = pList;
    if (this.programs.length > 0) {
        this.selectedObject = this.programs[0];
    }
}

The data is binding to "select" properly,

Can someone help whats the problem with this approach?

Upvotes: 1

Views: 5059

Answers (2)

Born2Code
Born2Code

Reputation: 137

Basically, the problem is when declaring [ngModel]. It should be within [(ngModel)] which was missed in my original problem. :)

Thanks a lot to Madhu Ranjan for help on the fix !

After correcting (ngModel) able to bind and fetch successfully.

<select [**(ngModel)**]="selectedObject"><option *ngFor="let p of programs"value= {{p.programName}}>{{p.programName}}</option> </select>

Upvotes: 0

Madhu Ranjan
Madhu Ranjan

Reputation: 17894

try below,

<select [(ngModel)]="selectedObject">
   <option *ngFor="let p of programs" 
           [ngValue] = "p"
           [selected]="p.programName == selectedObject.programName"
          >
         {{p.programName}}
   </option>
</select>

Check this Plunker!!

Hope this helps!!

Upvotes: 1

Related Questions