Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

443
Visualizações
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

over 4 years ago · Santiago Trujillo
4 Respostas
Responde à pergunta

0

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.

over 4 years ago · Santiago Trujillo Relatório

0

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>
over 4 years ago · Santiago Trujillo Relatório

0

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'"
over 4 years ago · Santiago Trujillo Relatório

0

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>

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda