How can I show a value different from what is written in the backend using Record

Question

I have this HTML

 <drop-down-list
                [name]="MeetingTool.Type"
                [options]="options$"
                [isRequired]="false" class="input-width"
                [parentFormGroup]="formGroup"
                [uniqueId]="'id'"
                [isHorizontal]="true">
              </drop-down-list>

and this TS:

options$ = new BehaviorSubject<string[]>(Object.values(TypeRecord));

export enum TypeInputEnum {
  TEAMDesktop = 'TEAMS Desktop',
  TEAMSWeb = 'TEAMS Web'
}

export const ClientTypeRecord: Record<TypeInputEnum, string> = {
  [TypeInputEnum.TEAMDesktop]: 'TEAMS Desktop',
  [TypeInputEnum.TEAMSWeb]: 'TEAMS Web'
};

The value I get for the backend looks like this TEAMSDesktop | TEAMSWeb. After selecting, saving, and refreshing the page, the user sees the value in the format of the backend.

I need it to show it in a format like the TypeInputEnum.

Answer 1

Ok, So after many attempts this is what worked for me

ngOnInit(): void {
    this.meetingsGroup = this.formGroupDir.control.get('meetings') as FormGroup;
    const value = this.meetingsGroup.get('options.Type')?.value;
    const enumValue = this.mapBackendValueToEnum(value);
    this.meetingsGroup.get('options.Type')?.patchValue(enumValue);
}

mapBackendValueToEnum(backendValue: string): string {
    switch (backendValue) {
        case 'TEAMDesktop':
            return ClientTypeInputEnum.TEAMDesktop;
        case 'TEAMSWeb':
            return ClientTypeInputEnum.TEAMSWeb;
        default:
            return backendValue;
    }
}