TypeScript enum mapping with .NET Core

If you haven’t tried mapping TypeScript enum with C# enum, you should give it a try. I find it handy while managing the codes (both frontend and backend). I’ve found the use of enum mapping really useful while using multiple options like multi select checkbox, dropdown, and radio buttons. This will help you maintain consistency with the use of option value.

Advantages

  1. Manages value changes only in one file, i.e enum file (both frontend and backend).
  2. Avoids static values in an array while using in multiple files.
  3. Maintains consistency with the value used.

Now I’m going to show an example with dropdown via Angular and .NET Core.

A. ANGULAR WITHOUT TYPESCRIPT ENUM MAPPING

app.component.ts

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"],
})
export class AppComponent implements OnInit {

    sampleForm: FormGroup;
    experienceFilter: [
        { value: 0, namme: '0-2 Years' },
        { value: 1, name: '3-5 Years' },
        { value: 2, name: '6-9 Years'},
        { value: 3, name: '10+ Years' }
    ];

    ngOnInit(): void {
        this.initializeForms();
    }

    initializeForms() {
        this.sampleForm = new FormGroup({
            experience: new FormControl()
        });
    }
}

B. ANGULAR WITH TYPESCRIPT ENUM MAPPING

year-experience.ts

export enum YearExperience {
    below2Years = 0,
    below5years = 1,
    below9Years = 2,
    above10Years = 3
}

export const YearExperienceDescription: Record<number, any> = [
    { value: YearExperience.below2Years, name: '0-2 Years' },
    { value: YearExperience.below5years, name: '3-5 Years' },
    { value: YearExperience.below9Years, name: '6-9 Years' },
    { value: YearExperience.above10Years, name: '10+ Years' }
];

app.component.ts

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"],
})
export class AppComponent implements OnInit {

    sampleForm: FormGroup;
    experienceFilter: Record<number, any> = YearExperienceDescription;

    ngOnInit(): void {
        this.initializeForms();
    }

    initializeForms() {
        this.sampleForm = new FormGroup({
            experience: new FormControl()
        });
    }
}

app.component.html

<form class="row col-12" [formGroup]="sampleForm">
    <div class="col-md-5 dropdown">
        <ng-select placeholder="Experience"
                            [items]="experienceFilter"
                            class="custom industry-filter"
                            [searchable]="false"
                            [dropdownPosition]="'bottom'"
                            bindLabel="name"
                            bindValue="value"
                            formControlName="experience"
                            id="experience"
                            appendTo="body"
                            (change)="onExperienceDropdown($event)">
        </ng-select>
    </div>
</form>

Angular with TypeScript enum mapping comes in handy if you are using the same enum, for instance, experienceFilter in many other components. Using this way avoids the static entry of values like in Angular without TypeScript enum mapping. If you want to add or update experienceFilter option value you only need to change on the enum file (here year-experience.ts). Thus, you maintain consistency with a change in a single file even if you are using the same enum filter in multiple components.