Open Closed

Angular enums and labels #3944


User avatar
0
mmaldonado@emscltd.com created
  • ABP Framework version: 5.3.4
  • UI type: Angular
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): yes
  • Template: microservices

I would like some help to display labels on Dropdowns using Enums

public enum ContactType
    {
        NotSelected = 0, // Label: "Not Selected"

        /// <remarks/>
        [System.Xml.Serialization.XmlEnum("1")]
        Administrative_Assistant = 1, // Label: "Administrative Assistant (101) "

        /// <remarks/>
        [System.Xml.Serialization.XmlEnum("2")]
        Medical_Director = 2, // Label: "Medical Director (911)"

        /// <remarks/>
        [System.Xml.Serialization.XmlEnum("3")]
        Quality_Performance_Improvement_Specialist = 3, // Label: "QA Improvement Specialist (301)"

        /// <remarks/>
        [System.Xml.Serialization.XmlEnum("4")]
        Other = 4, // Label: "Other (701)"
    }

I run the proxy generator and I see the next code

import { mapEnumToOptions } from '@abp/ng.core';

export enum ContactType {
  NotSelected = 0,
  Administrative_Assistant  = 1,
  Medical_Director = 2,
  Quality_Performance_Improvement_Specialist = 3,
  Other = 4
}

export const contactTypeOptions = mapEnumToOptions(CustomDataType);

should i use [Description("My label HERE")]

also checking that I should include something like this on my localization { "culture": "en", "texts": { "Enum:ContactType.NotSelected": "Label here", "Enum:ContactType.Administrative_Assistant": "Label here", "Enum:ContactType.Medical_Director": "Label here", "Enum:ContactType.Quality_Performance_Improvement_Specialist": "Label here", "Enum:ContactType.Other": "Label here", } }

could you provide me a documentation or example related to complete implementation of this feature?


4 Answer(s)
  • User Avatar
    -1
    muhammedaltug created

    Hello,

    You can use the following code as an example

        <select
        class="form-select form-control"
      >
        <option
          *ngFor="let option of contactTypeOptions; trackBy: track.by('value')"
          [ngValue]="option.value"
        >
          {{ '::Enum:ContactType.' + option.key | abpLocalization }}
        </option>
      </select>
    
  • User Avatar
    0
    mmaldonado@emscltd.com created

    It did not work, since i am on microservice template I have to use the prefix of the owner

    const label: string = this.localizationService.instant('MyService::Enum:' + enumTypeName + '.' + element.key);

  • User Avatar
    0
    mmaldonado@emscltd.com created

    you should modify the function

    mapEnumToOptions(CustomDataType);

    on microservices to get the localization of service

  • User Avatar
    0
    muhammedaltug created

    Can you send the response of application-configuration endpoint?

    Did you try following the way

     {{ 'MyService::Enum:ContactType.' + option.key | abpLocalization }}
    
Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11