Enumerations use in Angular HTML

Question

I have an enum and would like to use it in an Angular 13 component.

Enum:

export enum PropertyCode {
  ALPHA = 'ALPHA',
  BETA = 'BETA',
  ZETA = 'ZETA',
}

TS:

import { Component, VERSION } from '@angular/core';
import { PropertyCode } from './property-code';

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

  isHidden(code: PropertyCode): boolean {
    switch (code) {
      case PropertyCode.ALPHA:        return false;
      case PropertyCode.BETA:        return true;
      case PropertyCode.ZETA:        return false;
    }
  }
}

HTML:

<ul>
  <li *ngIf="!isHidden(PropertyCode.ALPHA)">Alpha</li>
  <li *ngIf="!isHidden(PropertyCode.BETA)">Beta</li>
  <li *ngIf="!isHidden(PropertyCode.ZETA)">Zeta</li>
</ul>

Result:

Sandbox here

However, I don't want to create a property corresponding to that enum in the component...

It has any meaning for me, because there is no specific information to keep in, and I would like to use the UpperCase letter in the HTML, as the normal enum.

So I tried the decorator

import { PropertyCode } from './property-code';

export function PropertyCodeAware(constructor: Function) {
  constructor.prototype.PropertyCode = PropertyCode;
}

and decorated the component, but that does not seem to help

@PropertyCodeAware
export class AppComponent {

Well, the property seem to be there, but the compiler doesn't know that. If you can find a way to instruct the compiler not to worry so much about that property not being explicitly declared, the error would most likely go away. — OctavianM
– OctavianM, Commented May 11, 2022 at 8:44
@OctavianMărculescu I don't have much experience to talking to compiler — serge
– serge, Commented May 11, 2022 at 9:04
Makes sense. I don't think you can get around this in a clean way. Maybe disable template checking, strict type checking, etc... — OctavianM
– OctavianM, Commented May 11, 2022 at 9:11
@OctavianMărculescu something like here ? stackoverflow.com/a/63337582/961631 — serge
– serge, Commented May 11, 2022 at 9:16
What's the problem with adding PropertyCode as component class's property? — Parzh
– Parzh, Commented May 11, 2022 at 11:39

serge · Accepted Answer · 2022-05-11 09:31:24Z

1

Genially simple solution proposed by Jorge Mussato, in the .component.ts

public get PropertyCode() {
  return PropertyCode; 
}

No need of decorators (to remove)

answered May 11, 2022 at 9:31

serge

15.5k42 gold badges144 silver badges241 bronze badges

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

9 Comments

Parzh Over a year ago

This is the same as public PropertyCode = PropertyCode;

serge Over a year ago

@DimaParzhitsky, no, because you have import { PropertyCode } from './property-code';

Parzh Over a year ago

Well, I just changed the sandox, and it worked for me.

Parzh Over a year ago

stackblitz.com/edit/angular-ivy-jx462h?file=src/app/…

serge Over a year ago

@DimaParzhitsky, is true that it seem possible... However, if you read the OP, when you add a property, you like have some specific info to keep for your component. By eg the property "Name" keeps the Name of that specific component. However, "PropertyCode" you have no specific "PropertyCode" for that component

|

SbKk · Accepted Answer · 2022-05-11 08:32:40Z

0

You have to create property in your AppComponent

propertyCode = PropertyCode;

than you can use it in your app.component.html template

<ul>
  <li *ngIf="!isHidden(propertyCode.ALPHA)">Alpha</li>
  <li *ngIf="!isHidden(propertyCode.BETA)">Beta</li>
  <li *ngIf="!isHidden(propertyCode.ZETA)">Zeta</li>
</ul>

answered May 11, 2022 at 8:32

SbKk

312 bronze badges

6 Comments

Jacopo Sciampi Over a year ago

However, I don't want to create a property corresponding to that enum in the component... OP wrote it pretty clearly.

serge Over a year ago

thanks @JacopoSciampi, I edited the OP to stress that

mrdnk Over a year ago

I think this is the right approach. You should be able to use the Uppercase version... PropertyCode = PropertyCode;

serge Over a year ago

@mrdnk a property of something, means that that something has some property, we could change. In our case, the PropertyCode is not a property of the component.

serge Over a year ago

@mrdnk having a getter seems to me a cleaner alternative to a writable property.

|

Collectives™ on Stack Overflow

Enumerations use in Angular HTML

2 Answers 2

9 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related