Cannot approach Typescript enum within HTML
HtmlAngularTypescriptEnumsHtml Problem Overview
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?
Html Solutions
Solution 1 - 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"
Solution 2 - Html
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. :)
Solution 3 - Html
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
Solution 4 - Html
import MyEnum from enums;
.... Declarate var ....
public myEnum = MyEnum;
and in html use:
<div *ngIf="xxx === myEnum.DATA"> ... </div>
Solution 5 - Html
You can bind as text if enum defined as below (those values won't enforce a json string value coming from API)
export enum SomeEnum {
Failure = "Failure",
Success = "Success",
}
In .ts file
public status: SomeEnum;
In .html
<div *ngIf="status == 'Success'">
Another way, tested in Angular 8+ is to have enums with numbers
export enum SomeEnum {
Failure = 0,
Success = 1,
}
In .ts file
public status: SomeEnum;
In .html
<div *ngIf="status == 1">
Solution 6 - Html
In your Service
export enum ConnectionResult {
Success,
Failed
}
Assign the enum to a varaible in TypeScript File
ConnectionResult = ConnectionResult;
Then read your Enum from HTML as bellow
*ngIf="result == ConnectionResult.Success"