If you prefer not to create a new pipe, here is another solution. You can extract keys into a helper property and use it like this:

@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)));
  }
}

Check out the demo: http://plnkr.co/edit/CMFt6Zl7lLYgnHoKKa4E?p=preview

Edit:

If you want the options as numbers instead of strings:

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

Here is a simple method for Angular2 version 2.0.0. To demonstrate setting a default value for the country select using reactive forms, see below.

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

  constructor(private fb: FormBuilder) {
    this.keys = Object.keys(this.countries).filter(Number);
    this.country = CountryCodeEnum.Belgium; //Set default value
  }
}

In my Angular application, I have opted to use a simple utility function that is shared across the app. This function is used to convert an enum into a standard array which is then utilized for building selects:

export function enumSelector(definition) {
  return Object.keys(definition)
    .map(key => ({ value: definition[key], title: key }));
}

I utilize this function to populate a variable in the Component as follows:

public countries = enumSelector(CountryCodeEnum);

This allows me to easily populate a Material Select component similar to how I would with regular array-based data sources:

<md-select placeholder="Country" [(ngModel)]="country" name="country">
  <md-option *ngFor="let c of countries" [value]="c.value">
    {{ c.title }}
  </md-option>
</md-select>

Grateful for the insights from this discussion!

Here is an alternative solution that includes the "0" index without omitting it like the "Unset" option. I believe using filter(Number) may not be the best approach in this scenario.

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

export class App {
  countries = CountryCodeEnum;

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

// ** NOTE: This enum contains 0 index **
export enum CountryCodeEnum {
   Unset = 0,
   US = 1,
   EU = 2
}

Building off of this response, a different approach is taken here by mapping the values as numbers rather than converting them to strings, thereby fixing a bug. This method also accommodates 0-based enums.

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

export class App {
  countries = CountryCodeEnum;

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

Angular 6.1 and later versions have a built-in KeyValuePipe that can be used as shown below (taken from angular.io docs).

It is assumed that the enum contains human-readable strings, of course :)

@Component({
  selector: 'keyvalue-pipe',
  template: `<span>
    <p>Object</p>
    <div *ngFor="let item of object | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
    <p>Map</p>
    <div *ngFor="let item of map | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
  </span>`
})
export class KeyValuePipeComponent {
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
  map = new Map([[2, 'foo'], [1, 'bar']]);
}

Utilizing string enums allows for the following approach.

A simple definition of my string enum would look like this:

    enum StatusEnum {
        Published = <any> 'published',
        Draft = <any> 'draft'
    }

When translated to JavaScript, it resembles the snippet below:

   {
       Published: "published", 
       published: "Published", 
       Draft: "draft", 
       draft: "Draft"
   }

To streamline usage across multiple instances in my project, a utility function was created within a shared service library:

   @Injectable()
   export class UtilsService {
       stringEnumToKeyValue(stringEnum) {
           const keyValue = [];
           const keys = Object.keys(stringEnum).filter((value, index) => {
               return !(index % 2);
           });

           for (const k of keys) {
               keyValue.push({key: k, value: stringEnum[k]});
           }

           return keyValue;
       }
   }

To implement this functionality in a component and bind it to the template, utilize the examples below:

In the component:

    statusSelect;

    constructor(private utils: UtilsService) {
        this.statusSelect = this.utils.stringEnumToKeyValue(StatusEnum);
    }

In the template:

    <option *ngFor="let status of statusSelect" [value]="status.value">
        {{status.key}}
    </option>

Remember to include the UtilsService in the provider array within your app.module.ts file for easy injection into different components.

As a newcomer to TypeScript, I welcome any corrections or suggestions for improvement.

Here is a simple and efficient way to implement this without the need for pipelines or additional code.

import { Component } from '@angular/core';

 enum UserStatus {
    active = 1,
    inactive = 2,
    pending = 3,
    blocked = 0
}


@Component({
  selector: 'my-app',
  template: `
  <h1>Select Status</h1>

  <select (change)="parseValue($event.target.value)">
    <option>--choose--</option>
    <option *ngFor="let status of statuses"
        [value]="status">{{status}}</option>
  </select>

  <h1 [hidden]="selectedStatus == null">
    You selected {{UserStatus[selectedStatus]}}

  </h1>`
})
export class AppComponent { 


  statuses : string[];
  selectedStatus: UserStatus;
  UserStatus : typeof UserStatus = UserStatus;

  ngOnInit() {
    var x = UserStatus;
    var statuses = Object.keys(UserStatus);
    this.statuses = statuses.slice(statuses.length / 2);
  }

  parseValue(value : string) {
    this.selectedStatus = UserStatus[value];

  }
}

export enum Unit
{
    Kg = 1,
    Pack,
    Piece,
    Litre
}

//using map method in Angular

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'enumToArray'
})
export class EnumToArrayPipe implements PipeTransform {

  transform(enumObj: Object) {

    const keys = Object.keys(enumObj).filter(key => parseInt(key));
    let map = new Map<string, string>();
    keys.forEach(key => map.set(key, enumObj[key]))
    console.log( Array.from(map));
    return Array.from(map);
  }

}

//Using set method in Angular

    import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({
      name: 'enumToArray'
    })
    export class EnumToArrayPipe implements PipeTransform {

      transform(enumObj: Object) {

        const keys = Object.keys(enumObj).filter(key => parseInt(key));
        let set = new Set();
        keys.forEach(key => set.add({ key: parseInt(key), value: enumObj[key] }))
        return Array.from(set);
      }

    }