Why Angular duplicate enum values?

Question

Here's my enum:

export enum MyTypes {
  House = 1,
  Apartment = 2,
  Flat = 3,
  Studio = 4
}

if I cycle in a select this way:

<mat-select formControlName="myTypeField">
  <mat-option [value]="item.value" *ngFor="let item of myTypes"
    >{{ item.key }}
  </mat-option>
</mat-select>

it shows:

1
2
3
4
House
Apartment
Flat
Studio

i.e. show both keys and values. Why?

Answer 1

This is because of the way enums are compiled into objects by TypeScript. You can use TypeScript playground to see how it's converted to JavaScript.

export enum MyTypes {
  House = 1,
  Apartment = 2,
  Flat = 3,
  Studio = 4
}

console.log(Object.keys(MyTypes));
// Prints: ["1", "2", "3", "4", "House", "Apartment", "Flat", "Studio"]

Live demo: https://stackblitz.com/edit/typescript-fviymz

You'll need to first iterate the enum and get its own properties: How to get names of enum entries?