CODEWITHSUNDEEP
htmlangulartypescriptenums
Ling Vu
Ling Vu

Reputation: 5181

Use of Enums in Angular 8 HTML template for *ngIf

How can I use Enums in the Angular 8 template?

component.ts

import { Component } from '@angular/core';
import { SomeEnum } from './global';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = SomeEnum.someValue;
}

component.html 

<span *ngIf="name === SomeEnum.someValue">This has some value</value>

This currently doesn't work, since the template has no reference to SomeEnum. How can I solve it?

ERROR Error: Cannot read property 'someValue' of undefined

Upvotes: 99

Views: 56355

Answers (6)

j9k3r
j9k3r

Reputation: 173

If you plan to use this enum in many components, I suggest you use a Pipe:

import { Pipe, PipeTransform } from '@angular/core';
import { SomeEnum } from 'path/to/some-enum.enum';

@Pipe({
    name: 'compareToSomeEnum',
})
export class CompareToSomeEnumPipe implements PipeTransform {
    transform(
        value: SomeEnum,
        compareTo: keyof SomeEnum,
    ): boolean {
        return value === SomeEnum[compareTo];
    }
}

And then use it in any template like this:

<span *ngIf="name | compareToSomeEnum : 'someValue'">This has some value</span>

I hope this helps!

Upvotes: 2

Cory Lewis
Cory Lewis

Reputation: 689

I think this would be one of the simpler solutions if you do not want to bloat your class with unnecessary logic. I would avoid calling a function to return the enum because it will be called on every re-render and will impact your performance if this is heavily used.

public readonly myEnum : typeof MyEnum = MyEnum;

Upvotes: 18

Jorge Mussato
Jorge Mussato

Reputation: 2524

in the TS

import { SomeEnum } from 'path-to-file';

public get SomeEnum() {
  return SomeEnum; 
}

in the HTML use

*ngIf="SomeEnum.someValue === 'abc'"

EDIT: Time goes by and we learn more as a developer, the approach I'm using right now doesn't use the get method. Both solutions work, just choose the one you like the most.

in the TS

import { SomeEnum } from 'path-to-file';

export class ClassName {
  readonly SomeEnum = SomeEnum;
}

in the HTML use

*ngIf="SomeEnum.someValue === 'abc'"

Upvotes: 168

Tsvetan Ganev
Tsvetan Ganev

Reputation: 8856

You can declare a field equal to the SomeEnum enum (it may be imported from another file) as a public class field in the component file. Then it will be accessible in the template.

// component 
export class AppComponent  {
  name = SomeEnum.someValue;
  enum = SomeEnum;
}

// template
<span *ngIf="name === enum.someValue">This has some value</value>

Upvotes: 7

Tarun1704
Tarun1704

Reputation: 191

Yes, the template cannot refer to the enum directly. There are few ways to do this. 1. Add Enum reference to the component ts file like below

someEnum = SomeEnum;

then you will be able to use the reference in your template like this 

<span *ngIf="name === someEnum.someValue">This has some value</value>
  1. The second way is to call a function from your template with name as parameter and compare it in the typescript file

<span *ngIf="checkCondition(name)">This has some value</value>

Upvotes: 6

SiddAjmera
SiddAjmera

Reputation: 39442

You'll have to declare it as a property first:

import { Component } from '@angular/core';
import { SomeEnum } from './global';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = SomeEnum.someValue;
  importedSomeEnum = SomeEnum;
}

And then use it in the template:

<span *ngIf="name === importedSomeEnum.someValue">This has some value</span>

Here's a Working Demo for your ref.

Upvotes: 35

Related Questions