Build a select dropdown with *ngFor in Angular 2

One of the most repeated questions with angular2 i have come across Stack overflow is "how to generate a select dropdown with an array or object". Hence, i decided to write a sample post with sample code to ease the search.

I will be posting two samples with one simple array and other with object.

Assume you want to generate a dropdown select by having an array with years.

  years = ['2016','2015','2014'];  

The app.component.ts code will look like,

 import {Component} from '@angular/core';  
 import {Http} from '@angular/http'  
 import {bootstrap} from '@angular/platform-browser-dynamic';  
 import { Component } from './Component';  
 @Component({  
  selector: 'material-app',  
  templateUrl: 'app.component.html'  
 })  
 export class AppComponent {  
  years = ['2016','2015','2014'];  
  selectedyear = '2015' ;  
  onChange(year) {  
   alert(year);  
  }  
 } 

In the above cocde selectedyear indicates the default value of the dropdown whenever the app is loaded.  onChange is the event gets fired whenever a option is changed, you can capture the selected value with the event.

And the template  app.component.html will look as follows,

 ;  
   {{c}} ;  

*ngFor is being used to repeat the items as options. It's simple as above.

DEMO USING ARRAY

Next we will see how to bind a object using *ngFor . Assume  if you have a object and want to bind the keys as drop down values,

 currencyList = {  
 "USD": {  
 "symbol": "$",  
 "name": "US Dollar",  
 "symbol_native": "$",  
 "decimal_digits": 2,  
 "rounding": 0,  
 "code": "USD",  
 "name_plural": "US dollars"  
 },  
 "CAD": {  
 "symbol": "CA$",  
 "name": "Canadian Dollar",  
 "symbol_native": "$",  
 "decimal_digits": 2,  
 "rounding": 0,  
 "code": "CAD",  
 "name_plural": "Canadian dollars"  
 }  
 };  

to get the keys of object you can use  Object.keys(this.currencyList); and the rest is same as above sample.

DEMO USING OBJECT