Select based on enum in Angular2

by

One more solution if you don’t want to create a new pipe. You could also extract keys into helper property and use it:

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <select>
        <option *ngFor="let key of keys" [value]="key" [label]="countries[key]"></option>
      </select>
    </div>
  `,
  directives: []
})
export class App {

  countries = CountryCodeEnum

  constructor() {
    this.keys = Object.keys(this.countries).filter(k => !isNaN(Number(k)));
  }
}

Demo: http://plnkr.co/edit/CMFt6Zl7lLYgnHoKKa4E?p=preview

Edit:

if you need the options as numbers instead of strings:

  • replace [value] with [ngValue]
  • add .map(Number) after .filter(...)

More Related Contents:

  1. *ngFor running an infinite loop in angular2
  2. Angular 2 custom form input
  3. How to inject Document in service?
  4. Angular 2 Show and Hide an element
  5. Min / Max Validator in Angular 2 Final
  6. Angular 2: Convert Observable to Promise
  7. Angular2: How to load data before rendering the component?
  8. Angular2 – should private variables be accessible in the template?
  9. How to prepare release version with SystemJS and Gulp?
  10. Angular2 canActivate() calling async function
  11. Angular 2 beta.17: Property ‘map’ does not exist on type ‘Observable’
  12. How to display json object using *ngFor
  13. Angular 2 View will not update after variable change in subscribe
  14. Angular no provider for NameService
  15. Angular 2 Form “Cannot find control with path”
  16. Angular2 – Share data between components using services
  17. Accessing a property in a parent Component
  18. TypeScript error in Angular2 code: Cannot find name ‘module’
  19. Visual Studio Code Automatic Imports
  20. Get route query params
  21. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  22. Angular 2 ngModel in child component updates parent component property
  23. Angular 2 creating reactive forms with nested components
  24. How to implement Custom Async Validator in Angular2/4/5
  25. Import gapi.auth2 in angular 2 typescript
  26. Angular 2 loader on each http request
  27. detect change of nested property for component input
  28. What exactly $event object do in Angular 2?
  29. How to place a dynamic component in a container
  30. Access Meta-Annotation inside Class (TypeScript)

Leave a Comment