Displaying enum value in html with angular

Question

I have an enum:

export enum NumberEnum { 
   One = 1,
   Two = 2,
   Three = 3
}

Within my component I have a successfully working call to a service which is passing back a result which has the associated properties returned with the enum values as integers:

export class DetailsComponent implements OnInit, OnDestroy {

details$: any;
number: NumberEnum;


ngOnInit(): void {
         this.route.params.pipe(
         switchMap(params => this.service.getDetails(params['details-id']))
       ).subscribe(result => {
         this.details$ = result;
         this.number = this.details$.Number as NumberEnum;
       });
}

In my html when I try to display {{ number }} it is displaying the integer value as opposed to the string value which I would like. I have tried casting a different way...which looks like this:

this.number = NumberEnum[this.details$.Number];

but i get an error "Type 'string' is not assignable to type 'Number'" The code compiles and displays as I would like, I just know it's not best practise to have a red error line in my code.

Can't seem to find anything online which achieves what I want to do.

PMO1948 · Accepted Answer · 2020-11-11 16:06:52Z

4

rather then setting this.number = NumberEnum[this.details$.Number]; and changing your this.number, just display it differently in the HTML. Either do {{ NumberEnum[number];}} or if that does not work, create a pipe that does it and add it like {{number|stringPipe}}

answered Nov 11, 2020 at 16:06

PMO1948

2,5841 gold badge17 silver badges43 bronze badges

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

3 Comments

FeebsMary Over a year ago

This does work, is there any benefit to manipulating it in the html rather than in the component?

PMO1948 Over a year ago

yes. You are just affecting what you display, without affecting the value in your component. This can help prevent undesired side affects and the like later on

FeebsMary Over a year ago

that makes sense, this is purely a display component though there is no manipulation of the data on the front end. I will mark this as the answer as this does work

jkonst · Accepted Answer · 2020-11-11 16:43:42Z

1

Given that the type of details$ is string, I would add a function in DetailsComponent that will return the right NumberEnum value.

 export class DetailsComponent implements OnInit, OnDestroy {
    
    details: string;
    number: NumberEnum | undefined;
    
    
    ngOnInit() {
             this.route.params.pipe(
             switchMap(params => this.service.getDetails(params['details-id']))
           ).subscribe(result => {
             this.details = result;
             this.number = this.getDetailsNumber(this.details);
           });
    }
    getDetailsNumber(value: string): NumberEnum | undefined {
      return Number(value) in NumberEnum ? NumberEnum[Number(value)] : undefined;
    }
}

answered Nov 11, 2020 at 16:43

jkonst

4637 silver badges20 bronze badges

2 Comments

FeebsMary Over a year ago

Is there no way to cast it so that a method is not required? This does work however

jkonst Over a year ago

Casting is required because your Enum type is different than your service response in the specific example. You can modify the type to Number in your service response and the casting is no more needed.

FeebsMary · Accepted Answer · 2020-11-12 08:50:41Z

0

Ok so it turns out that the reason it was compiling ok with the red error line is that this was actually just a tsLint error (other errors were shown in yellow beforehand so not sure why this one was red - must've been my theme). Anyway I solved this by declaring number as a string instead of an enum so when I casted it, it accepted it and cast the numerical value to the enum string. And it displayed properly. Shown below:

export class DetailsComponent implements OnInit, OnDestroy {

details$: any;
number: string;

this.number = NumberEnum[this.details$.Number];

answered Nov 12, 2020 at 8:50

FeebsMary

251 gold badge1 silver badge5 bronze badges

Collectives™ on Stack Overflow

Displaying enum value in html with angular

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related