This solution is elegant and effective! By declaring your enum in this way, you can easily integrate it into your HTML template.

statusEnum: typeof StatusEnum = StatusEnum;

If you want your component to be aware of enums, you can create a custom decorator for it.

myenum.enum.ts:

export enum MyEnum {
    FirstValue,
    SecondValue
}

myenumaware.decorator.ts

import { MyEnum } from './myenum.enum';

export function MyEnumAware(constructor: Function) {
    constructor.prototype.MyEnum = MyEnum;
}

enum-aware.component.ts

import { Component } from '@angular2/core';
import { MyEnum } from './myenum.enum';
import { MyEnumAware } from './myenumaware.decorator';

@Component({
  selector: 'enum-aware',
  template: `
    <div [ngSwitch]="myEnumValue">
      <div *ngSwitchCase="MyEnum.FirstValue">
        First Value
      </div>
      <div *ngSwitchCase="MyEnum.SecondValue">
        Second Value
      </div>
    </div>
    <button (click)="toggleValue()">Toggle Value</button>
  `,
})
@MyEnumAware // <---------------!!!
export default class EnumAwareComponent {
  myEnumValue: MyEnum = MyEnum.FirstValue;

  toggleValue() {
    this.myEnumValue = this.myEnumValue === MyEnum.FirstValue
        ? MyEnum.SecondValue : MyEnum.FirstValue;
  }
}

Utilizing Enums in Angular4 HTML Templates with ngSwitch / ngSwitchCase

Check out the solution provided here:

Credit goes to @snorkpete

Within your component, define your Enum as follows:

enum MyEnum{
  First,
  Second
}

Incorporate the Enum type in your component by creating a member 'MyEnum' and another member for your enum variable 'myEnumVar':

export class MyComponent{
  MyEnum = MyEnum;
  myEnumVar:MyEnum = MyEnum.Second
  ...
}

You can now utilize myEnumVar and MyEnum in your .html template. For example, using Enums in ngSwitch:

<div [ngSwitch]="myEnumVar">
  <div *ngSwitchCase="MyEnum.First"><app-first-component></app-first-component></div>
  <div *ngSwitchCase="MyEnum.Second"><app-second-component></app-second-component></div>
  <div *ngSwitchDefault>MyEnumVar {{myEnumVar}} is not handled.</div>
</div>

currently in rc.6 / final stage

...

export enum AdnetNetworkPropSelector {
    INPUT,
    OUTPUT,
    ELEMENT
}

<div style="height: 100%">
          <div [ngSwitch]="propSelector">
                 <div *ngSwitchCase="adnetNetworkPropSelector.INPUT">
                      <AdnetNetworkOutputElements [setInputModels]="outputElement.selectedInputModel">
                                    </AdnetNetworkOutputElements>
                  </div>
                 <div *ngSwitchCase="adnetNetworkPropSelector.OUTPUT">
                </div>
            </div>              
        </div>


export class AdnetNetwork {       
    private adnetNetworkPropSelector = AdnetNetworkPropSelector;
    private propSelector = AdnetNetworkPropSelector.INPUT;
}

If you're looking for an alternative to @Eric Lease's decorator that doesn't play nicely with --aot and --prod builds, you can try using a service that exposes all your application's enums. Simply inject this service into each component that needs it, giving it an easy alias for easy access to the enums in your views. Here's an example:

Service Setup:

import { Injectable } from '@angular/core';
import { MyEnumType } from './app.enums';

@Injectable()
export class EnumsService {
  MyEnumType = MyEnumType;
  // ...
}

Make sure to add this service to your module's provider list.

Component Class Example:

export class MyComponent {
  constructor(public enums: EnumsService) {}
  @Input() public someProperty: MyEnumType;

  // ...
}

Example Usage In Component HTML:

<div *ngIf="someProperty === enums.MyEnumType.SomeValue">Match!</div>

Before proceeding, ask yourself 'Is this truly what I want to do?'

While it's easy to directly refer to enums in HTML, there are cleaner alternatives available that maintain type safety. For example, if you adopt the method outlined in a different response, you might have defined TT in your component like so:

public TT = 
{
    // Enum options (Horizontal | Vertical)
    FeatureBoxResponsiveLayout: FeatureBoxResponsiveLayout   
}

To display a different layout in your HTML, you would use an *ngIf for each layout type, and reference the enum directly in your component's HTML:

*ngIf="(featureBoxResponsiveService.layout | async) == TT.FeatureBoxResponsiveLayout.Horizontal"

This approach involves using a service to obtain the current layout, piping it asynchronously, and then comparing it to our enum value. It can be verbose, convoluted, and not very visually appealing. Additionally, it exposes the enum name, which could be excessively wordy.

An Alternative Approach to Maintain Type Safety in HTML

Alternatively, you can utilize the following method by creating a more readable function in your component's .ts file :

*ngIf="isResponsiveLayout('Horizontal')"

Cleaner and more concise! However, what happens if someone mistakenly types 'Horziontal'? The whole point of using an enum in the HTML was to ensure type safety, right?

We can still achieve this using keyof and some TypeScript wizardry. Here is the function definition:

isResponsiveLayout(value: keyof typeof FeatureBoxResponsiveLayout)
{
    return FeatureBoxResponsiveLayout[value] == this.featureBoxResponsiveService.layout.value;
}

Pay attention to the usage of

FeatureBoxResponsiveLayout[string]

, which converts the input string value into the numeric value of the enum.

If an invalid value is used, AOT compilation will trigger an error message:

Argument of type '"H4orizontal"' is not assignable to parameter of type '"Vertical" | "Horizontal"

Currently, VSCode may not highlight H4orizontal in the HTML editor, but you will receive a warning during compilation (with --prod build or --aot switch). This behavior may be enhanced in a future update.

In my component, I utilized an object called myClassObject which belonged to the type MyClass. This MyClass itself made use of MyEnum, leading to a similar issue as mentioned earlier. The problem was resolved by implementing the following:

export enum MyEnum {
    Option1,
    Option2,
    Option3
}
export class MyClass {
    myEnum: typeof MyEnum;
    myEnumField: MyEnum;
    someOtherField: string;
}

Subsequently, this structure was integrated into the template as shown below:

<div [ngSwitch]="myClassObject.myEnumField">
  <div *ngSwitchCase="myClassObject.myEnum.Option1">
    Perform action for Option1
  </div>
  <div *ngSwitchCase="myClassObject.myEnum.Option2">
    Perform action for Option2
  </div>
  <div *ngSwitchCase="myClassObject.myEnum.Option3">
    Perform action for Option3
  </div>
</div>

If you follow the 'typetable reference' method (as suggested by @Carl G) and are working with multiple type tables, you may want to consider this alternative approach:

export default class AppComponent {

  // Keep a reference to the enums (needs to be public for --AOT compatibility)
  public TT = { 
       CellType: CellType, 
       CatType: CatType, 
       DogType: DogType 
  };

  ...

  dog = DogType.GoldenRetriever; 

You can then access it in your HTML file using:

{{ TT.DogType[dog] }}   => "GoldenRetriever"

I personally prefer this method as it clearly indicates that you're referencing a typetable and helps keep your component file uncluttered.

Alternatively, you can create a global TT somewhere else and add enums to it as needed (if you opt for this, creating a service as demonstrated by @VincentSels might be a good idea). However, if you have numerous typetables, this approach could become cumbersome.

Remember to always rename them when declaring to use shorter names.

Now, you have the capability to:

Consider this enum as an example:

export enum MessagePriority {
    REGULAR= 1,
    WARNING,
    IMPORTANT,
}

Create a status message structured like so:

export default class StatusMessage{
    message: string;
    priority: MessagePriority;

    constructor(message: string, priority: MessagePriority){
        this.message = message;
        this.priority = priority;
    }
}

In the component's .ts file, include these lines of code:

import StatusMessage from '../../src/entities/building/ranch/administration/statusMessage';
import { MessagePriority } from '../../enums/message-priority';
        
export class InfoCardComponent implements OnInit {
    messagePriority: typeof MessagePriority;
            
    constructor() { 
        this.messagePriority = MessagePriority;
    }
            
    @Input() statusMessage: StatusMessage;
    ngOnInit(): void {}
}

Lastly, here is how the HTML structure of the component appears:

<div class="info-card" [ngSwitch]="statusMessage.priority">
    <h2 *ngSwitchCase="this.messagePriority.REGULAR" class="info-card__regular-message">{{statusMessage.message}}</h2>
    <h2 *ngSwitchCase="this.messagePriority.WARNING" class="info-card__warning-message">{{statusMessage.message}}</h2>
    <h2 *ngSwitchCase="this.messagePriority.IMPORTANT" class="info-card__important-message">{{statusMessage.message}}</h2>
</div>

Note how the enum is initially declared within the class with the type "typeof MessagePriority" and then linked to the class by setting it equal to "this.messagePriority = MessagePriority"