Angular 2 - How to display selected option for multi select dropdown?

Question

<select #selectedfiscalyear multiple> 
     <option *ngFor="let fiscalyear of fiscalyears" value = {{fiscalyear.value}}> 
                {{fiscalyear.value}} 
     </option>
 </select> 
<button class="btnView">Click</button>

where

fiscalyears = [
  {
    "year": "fiscalYear",
    "value": "2018"
  },
  {
    "year": "fiscalYear",
    "value": "2017"
  },
  {
    "year": "fiscalYear",
    "value": "2016"
  },
  {
    "year": "fiscalYear",
    "value": "2015"
  },]

So, how to get the multiple selected values(such 2018,2017,2016 an so on) on button click event?

Answer 1

Method 1.

In this case, you should use ngModel . You won't even need the button action then.

@Component({
  selector: 'my-app',
  template: `
    <select #selectedfiscalyear multiple [(ngModel)]="selectedVal"> 
      <option *ngFor="let fiscalyear of fiscalyears"> 
           {{fiscalyear.value}} 
      </option>
    </select> 
  <h1>{{ selectedVal }}</h1>
  `
})

Plunker code

Method 2.

In case , that you really want to call that function on button click, use following code:

@Component({
  selector: 'my-app',
  template: `
    <select #selectedfiscalyear multiple [(ngModel)]="selectedVal"> 
       <option *ngFor="let fiscalyear of fiscalyears"> 
           {{fiscalyear.value}} 
       </option>
    </select> 
    <button class="btnView" (click)="selectedVal.length ? select() : null">Click</button>
    <input id="result">
  `,
})

export class App {
  constructor() {}

  select(){
    document.getElementById('result').value = this.selectedVal;
  }
}

Plunker code 2