Implementing drop down in Angular2

Question

Is there a better way to implement a drop down in Angular2

I am doing the following

In the template

<select (change)="onSelect($event.target.value)">
                      <option *ngFor="#taskstatus of dropdownValues" [value]="taskstatus.value">{{taskstatus.name}}</option>
</select>

In the component class

export class CreateTaskComponent {

    public selectedStatus: Taskstatus = this.dropdownValues[0];
    public dropdownValues: Taskstatus[] = [
         {"name":"OPEN","value":"OPEN"},
         {"name":"CLOSED","value":"CLOSED"}
    ];

    onSelect(taskevent) { 
        this.selectedStatus = null;
        for (var i = 0; i < this.dropdownValues.length; i++)
        {
          if (this.dropdownValues[i].value == taskevent) {
            this.selectedStatus = this.dropdownValues[i];
            console.log(this.selectedStatus.value);
          }
        }
    }
}

class Taskstatus{
  name: string;
  value: string;
}

Is there a simpler approach to this ?

Günter Zöchbauer · Accepted Answer · 2016-05-30 04:55:58Z

1

Use ngModel and ngValue like:

<select [(ngModel)]="selectedStatus">
  <option *ngFor="#taskstatus of dropdownValues" [ngValue]="taskstatus">{{taskstatus.name}}</option>
</select>

edited May 30, 2016 at 4:55

answered May 30, 2016 at 4:53

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2180794 Over a year ago

everything else stays the same ?

Günter Zöchbauer Over a year ago

You don't need the onSelect method. Otherwise all can stay the same.

Günter Zöchbauer Over a year ago

Ups, forgot square brackets around ngModel - added.

Collectives™ on Stack Overflow

Implementing drop down in Angular2

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related