CODEWITHSUNDEEP
angulartypescriptselectdrop-down-menu
Chris Tarasovs
Chris Tarasovs

Reputation: 695

Angular 2 : Select on change to return the item

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'
      }

  ];

Upvotes: 0

Views: 2066

Answers (1)

Vivek Doshi
Vivek Doshi

Reputation: 58543

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>

Upvotes: 1

Related Questions