CODEWITHSUNDEEP
angular
rgoal
rgoal

Reputation: 1326

angular 2 selected text option

In Angular 2 how can I get the selected text from an option. Also since I have a dynamic number of selecs? (I think I need to add to an array) t how Can I get the text for all. I was able to get the value but what I need is the text.

HTML

 <div class="row  left" *ngFor='let control of tabControls'>
                    <div class="col-md-3 text-left" style="border:1px dotted">
                        {{control.DropDownTitle}}
                    </div>
                    <div class="col-md-9 text-left">
                        <select [(ngModel)]="selected" (change)="onChange($event.target.value)">
                            <option *ngFor='let controlList of control.DropdownValues' [ngValue]="controlList.Value">
                                {{controlList.Value}}
                            </option>
                        </select>

                    </div>

component

 onChange(selected: any) {
        console.log('selected item ' + selected);
    }

Note:tabControls is an interface

in the console it print

selected item 1: 2017

however, the other selections(month, company) lose the selection enter image description here

Upvotes: 2

Views: 8430

Answers (3)

Kibria
Kibria

Reputation: 141

You can iterate over you list, from which you are binding your drop down.

<mat-select placeholder="Select" [(ngModel)]="selectedStdId">
    <mat-option *ngFor="let std of lstStudents" [value]="std.id">
        {{ std.name }} 
    </mat-option>
</mat-select>

Here, lstStudents is your array with id, name which populates the drop down. You will get the selected value like this.selectedId = this.selectedStdId; Now you all have to do is that loop through your lstStudents array and get the name from it whose id corresponds to the this.selectedStdId. Eg,

for(var i = 0; i < this.lstStudents.length; i++) {
    if(this.lstStudents[i].id == this.selectedStdId) {
        this.yourDesiredText = this.lstStudents[i].name;
    }
}

Upvotes: 0

muzurB
muzurB

Reputation: 317

EDIT 2: I just noticed that you're iterating through the tabs via *ngFor so there are actually 3 select elements so you need 3 different ngModel bindings.

So first, change the type of your selected property inside your component to an array of any and initialize it.

selected: any[] = [];

Then, declare an index, i, on your *ngFor and bind ngModel to selected[i]:

<div class="row  left" *ngFor='let control of tabControls; let i = index'>
                <div class="col-md-3 text-left" style="border:1px dotted">
                    {{control.DropDownTitle}}
                </div>
                <div class="col-md-9 text-left">
                    <select [(ngModel)]="selected[i]" (change)="onChange($event.target.value)">
                        <option *ngFor='let controlList of control.DropdownValues' [ngValue]="controlList.Value">
                            {{controlList.Value}}
                        </option>
                    </select>

                </div>

Upvotes: 2

AVJT82
AVJT82

Reputation: 73367

You are probably looking for ngValue, which binds the whole object, but with that, add ngModel in the mix, but that means you have another variable. Maybe there is a better way to solve this, without an extra variable. If so, please do tell!

So change your code to something like this:

<select [(ngModel)]="selected" (ngModelChange)="onChange(selected)">
     <option *ngFor='let controlList of control.DropdownValues' [ngValue]="controlList">
          {{controlList.Value}}
    </option>
</select>

And in your component:

selected: any;

onChange(selected: any) {
  console.log('selected item ' + selected);
}

The error you are getting is because you need to import FormsModule to your NgModule.

Here's a working plunker

Upvotes: 1

Related Questions