Angular Enums

Enumerations allow the developer to define a set of named constants. TypeScript provides both numeric and string-based enums.

Enum TS:

export enum PropertyTypeEnum {
  House = 'House',
  Apartment = 'Apartment'
}

Component TS:

import { Component } from '@angular/core';
import { PropertyTypeEnum } from 'app/shared/enumerations/property-type.enum';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  propertyTypeRef = PropertyTypeEnum;

  constructor() {
    // this works
    console.log(PropertyTypeEnum.House);
    // this works
    console.log(this.propertyTypeRef.House);
  }
}

Template html:

This works: {{ propertyTypeRef.House }}
This does not work: {{ PropertyTypeEnum.House }}

Leave a Comment