Angular 2 : Select on change to return the item

Question

How do I pass an item on change?

I got this far:

<select #sel (change)="select.emit(sel.value.url)"> <option *ngFor="let item of selectlist"> {{item.description}} </option> </select>

But I would like to get the "item" passed back on change.

I should get back just the item object

{ value: 0, description: 'Home', url: 'http://www.color.com' }

but instead I get 'Home'.

Here is my Full array

public pagelist:Array<Object> = [ { value: 0, description: 'Home', url: 'http://www.color.com' }, { value: 1, description: 'Tours', subpage: [{ value: 0, description: 'Italy' }, { value: 0, description: 'France' }, { value: 0, description: 'London' }] }, { value: 1, description: 'About us', url: 'http://www.color.com' }, { value: 1, description: 'Contact us', url: 'http://www.color.com' } ];

Vivek Doshi · Accepted Answer · 2017-06-16 18:14:52Z

1

Replace your code with :

<select #sel (change)="select.emit(selectlist[$event.target.value])"> <option [value]='i' *ngFor="let item of selectlist; let i = index;"> {{item.description}} </option> </select>