Cannot approach Typescript enum within HTML

angular 7 enum in template
angular 4 enum in html
angular compare enum in html
angular 6 use enum in html
angular enum in template
angular display enum value in html
typescript enum in class
angular 6 enum in template

I made an enum with Typescript to use in MyService.service.ts MyComponent.component.ts and MyComponent.component.html.

export enum ConnectionResult {
    Success,
    Failed     
}

I can easily get and compare a defined enum variable from MyService.service.ts:

this.result = this.myService.getConnectionResult();

switch(this.result)  
{
    case ConnectionResult.Failed:
         doSomething();
         break;
    case ConnectionResult.Success:
         doSomething();
         break;
}

I also wanted to use the enum for a comparison within my HTML using the *ngIf statement:

<div *ngIf="result == ConnectionResult.Success; else failed">
            <img src="../../assets/connection-success.png" height="300px" class="image-sign-style" />
</div>
<ng-template #failed>
       <img src="../../assets/connection-failed.png" height="300px" class="image-sign-style" />
</ng-template>

The code compiles but the browser gives me an error:

Cannot read property of undefined

With the following html indication error line:

Does anyone know why the enum cannot be approached like this?

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 {
  get connectionResult() { return ConnectionResult; }
}

then you can use

*ngIf="connectionResult.Success"

See also Angular2 access global variables from HTML template

How to use a typescript enum value in an Angular2 ngSwitch , You can create a reference to the enum in your component class (I just changed Angular4 - Using Enum in HTML Template ngSwitch / ngSwitchCase I have no problem referring to enums directly in HTML, but in some cases there are For instance if you choose the approach shown in my other answer, you may have  In TypeScript, enums have a few surprising limitations. In particular, it can be challenging to check whether or not a value is in an enum in a type-safe way. In this article, I’m going to explore that problem with a few examples. Hopefully you’re using TypeScript with the --strict flag. If you’re not, I’ll point out where the trouble with enums can be particularly pervasive and lead to uncaught runtime errors.

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. :)

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 Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

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
}

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

Using TypeScript Enums in Angular Templates, But, the problem with Enum type properties arises in Angular to the enum members, but this approach produces unclear markup, and it might  enum NoYes { No = 'No', Yes = 'Yes', } assert.equal(NoYes.No, 'No'); assert.equal(NoYes.Yes, 'Yes'); If an enum is completely string-based, we cannot omit any initializers. Heterogeneous enums # The last kind of enums is called heterogeneous. The member values of a heterogeneous enum are a mix of numbers and strings:

Error "Operator '===' cannot be applied to types" with enum type , TypeScript Version: 2.0.3 Code enum SomeEnum { V1, V2 } class enum SomeEnum { V1, V2 } class SomeClass { protected state:SomeEnum method() { // "Operator '===' cannot be I didn't expect that error in these cases  Please note that this is different from how to create html select options based upon ALL of the values of an enum (ngFor). This question is about ngSwitch based upon a particular value of an enum. Although the same approach of creating an class-internal reference to the enum appears.

Enums · TypeScript, Enums #. Enums allow us to define a set of named constants. Using enums can make it Numeric enums can be mixed in computed and constant members (see below). This is possible since const enums cannot have computed members. Here are some reasons why enums are very useful in TypeScript: With enums you can create constants that you can easily relate to, making constants more legible With TypeScript enums, developers have the freedom to create memory-efficient custom constants in JavaScript. JavaScript, as we know, does not support enums

Writing readable code with TypeScript enums, Explore the ins and outs of enums in TypeScript, including their types and properties, Here are some reasons why enums are very useful in TypeScript: system; Enums cannot be used as variables, doing so would return errors It also instruments the DOM to record the HTML and CSS on the page,  Enums allow us to define a set of named constants. Using enums can make it easier to document intent, or create a set of distinct cases. TypeScript provides both numeric and string-based enums.

Comments
  • Since I am strictly following the coding standards, what data type , I have to give for the connectionResult
  • I don't know. I only used TypeScript in Plunker and there were no type checks. I'd expect the error message tells you the expected type when you use an incompatible one, doesn't it?
  • Thanks, let me start a new conversation in stack overflow
  • Yes, just a plain property member didn't work for me, but setting it as a getter worked.
  • Don't forget to use '=' and not ':', between TenureType and Tenure, i.e. assign the type don't define it. I just made that mistake overlooking what @Nikhil had written. +1