Cannot approach Typescript enum within HTML

The scope of the template is limited to the component instance members.If you want to refer to something it needs to be available there

class MyComponent {  public get connectionResult(): typeof ConnectionResult {    return ConnectionResult;   }}

In the HTML you can now use

*ngIf="connectionResult.Success"

See also Angular2 access global variables from HTML template

You will have to write it in the following way in .ts file.

enum Tenure { day, week, all }export class AppComponent {    tenure = Tenure.day    TenureType = Tenure}

And now in html you can use this like

*ngIf = "tenure == TenureType.day ? selectedStyle : unSelectedStyle"

I hope it is more clear now. :)

You can just add the enum to your component as property and use the same name of the enum (Quarters) in your templates:

enum Quarters{ Q1, Q2, Q3, Q4}export class AppComponent {   quarter = Quarters.Q1   Quarters = Quarters //here you are creating a variable/alias to the enum}

In your template

<div *ngIf="quarter == Quarters.Q1">I=am only visible for Q1</div> 

The reason why this works is that the new porperty is basically of this type:

TileType: typeof TileType