I'm working with an enum in Angular 13 and I want to use it in a 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:
https://i.sstatic.net/oMO8I.png
Sandbox here
My goal is to avoid creating a property for the enum in the component...
It's unnecessary as there's no specific data to store, and I prefer using UpperCase letters in the HTML, like a standard enum.
So, I attempted using a decorator
import { PropertyCode } from './property-code';
export function PropertyCodeAware(constructor: Function) {
constructor.prototype.PropertyCode = PropertyCode;
}
and applied the decorator to the component, but it didn't solve the issue
@PropertyCodeAware
export class AppComponent {