enum value is not properly evaluated in Angular 9 template

Question

app.component.html

<div *ngFor="let file of files">
 <p>value : {{file.type}}</p>
 <p>bool : {{file.type === FileAccessType.ENTRY_CREATE}}
</div>

app.component.ts

export class AppComponent{
 files : FileAccess[];
 FileAccessType : FileAccessType;
}

file-access.ts

export interface FileAccess {
   path: string;
   type: FileAccessType;
   timestamp: number;
}

file-access-type.ts

export enum FileAccessType{
   ENTRY_CREATE,
   ENTRY_DELETE,
   ENTRY_MODIFY
}

the boolean comparison in template does not work as expected

{{file.type === FileAccessType.ENTRY_CREATE}} //always gives false

ref : stackblitz

You need to declare and assign the enum type like in @Oleksii answer. stackblitz.com/edit/angular-gkcppp — Jason White
– Jason White, Commented Apr 6, 2020 at 17:38

Oleksii · Accepted Answer · 2020-04-06 17:28:31Z

2

In app.component you should declare your enum variable like this readonly FileAccessType = FileAccessType;

answered Apr 6, 2020 at 17:28

Oleksii

563 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

VRoxa · Accepted Answer · 2020-04-07 02:11:52Z

0

Angular components cannot infer types as enums to HTML markdows.
So, as @Oleksii mentioned, you should declare an internal variable to store the type, then, Angular is able to evaluate from the HTML and access the enum's values.

*.html

<div *ngFor="let file of files">
    <p> Value : {{ file.type }} </p>
    <p> Bool : {{ file.type === fileType.ENTRY_CREATE }}
</div>

*.ts

export class FilesComponent {

  fileType = FileAccessType; // Type assign
  files = [...files]; // This is just mocked data

  constructor() {}

}

Alternatively, you can delegate the responsability of the condition to the component, like so

export class FilesComponent {

  files = [...files]; // This is just mocked data

  constructor() {}

  isCreateType = (file: FileAccess) => file.type === FileAccessType.ENTRY_CREATE;
}

Now, you don't have to expose the enum to the HTML

<div *ngFor="let file of files">
    <p>value : {{ file.type }}</p>
    <p>bool : {{ isCreateType(file) }}
</div>

answered Apr 7, 2020 at 2:11

VRoxa

1,0519 silver badges27 bronze badges

1 Comment

Rahul Somasundaram Over a year ago

both of your suggestions are not working, when i check in Component also, its giving false

Collectives™ on Stack Overflow

enum value is not properly evaluated in Angular 9 template

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related