Angular/Typescript: Rename individual enum values in a dropdown menu

Question

Say I have an enum which is just

export enum TestEnum {
  A = 'A',
  B = 'B',
  C = 'C',
}

and in my components.ts method you can find this:


optionsTestEnum: SelectItem[];

  initDropdownOptionsEnum() {

    this.optionsTestEnum = Object.keys(TestEnum).map(v => {
      return { label: v, value: v };
    });
  }

SelectedItem takes the enum values from a java backend.

TestEnum.java:

public enum TestEnum {
  A, B, C
}

and my component.html is something like this:

        <div class="col-6 col-sm-6">
          <si-newton-form-group [label]="'testFlag' | translate" ccFormGroup>
            <p-dropdown [options]="optionsTestEnum" formControlName="testFlag" 
                        [ccDisabled]="readOnly" ccNewton>
            </p-dropdown>
            <cc-input-validationmessage [form]="testForm" controlName="testFlag">
            </cc-input-validationmessage>
          </si-newton-form-group>
        </div>

I would like to do an if, else statement where I can choose the values from the testenum (A,B,C) and rename these variables individually using

this.translate.instant(''),

If I write something like this:

    this.optionsTestEnum = Object.keys(TestEnum).map(v => {
      return { label: this.translate.instant('testEnum.test1'),, value: v };
    });
  }

the dropdown menu in my front-end only shows me that all three values from the enum (A,B,C) have now the same name.

The translation:

this.translate.instant(''),

uses an json file in my case en.json.

    "testEnum": {
        "test1": "Test 1",
        "test2": "Test 2",
        "test3": "Test 3",

The values from my enum instead should have the names from the json file. A should be renamed to Test 1, B should be renamed to Test 2 and C should be renamed Test 3. So how can I write an if condition in component.ts that renamed my variables correctly?

Could anybody help me?

The values from my enum (A,B,C) should get renamed individually by using an if condition in component.ts — Jolosin
– Jolosin, Commented Jan 20, 2021 at 13:01

Luca · Accepted Answer · 2021-01-20 13:07:47Z

1

Here

this.optionsTestEnum = Object.keys(TestEnum).map(v => {
      return { label: this.translate.instant('testEnum.test1'), value: v };
    });

You are translating each of your vs to the string 'testEnum.test1', so you always get "Test 1".

What you want to do is something like:

    this.optionsTestEnum = Object.keys(TestEnum).map(v => {
      return { label: this.translate.instant('testEnum.' + v), value: v };
    });

This way you will translate the strings 'testEnum.A', 'testEnum.B' and 'testEnum.C'. Now you just have to put the translation for A,B,C in your translate file like:

 "testEnum": {
    "A": "Test 1",
    "B": "Test 2",
    "C": "Test 3"
 }

answered Jan 20, 2021 at 13:07

Luca

1191 silver badge6 bronze badges

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

Comments

Rachid O · Accepted Answer · 2021-01-20 13:08:10Z

0

one solution would be to rename your tranlations keys to reflect the Enum Keys :

"testEnum": {
    "testA": "Test 1",
    "testB": "Test 2",
    "testC": "Test 3",

and then

this.optionsTestEnum = Object.keys(TestEnum).map(k => {
      return { label: this.translate.instant(`testEnum.test${k}`),, value: k };
    });
  }

answered Jan 20, 2021 at 13:08

Rachid O

14.3k16 gold badges73 silver badges97 bronze badges

Collectives™ on Stack Overflow

Angular/Typescript: Rename individual enum values in a dropdown menu

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related