Hi,
Using the commercial license with Angular frontend.
For those dropdown lists where we get the list of items from the API we use the abp-lookup-select component.
Just wondering if there is a similar component for working with enum-s?
e.g. given below enum
import { mapEnumToOptions } from '@abp/ng.core';
export enum GeometryTypeEnum {
None = 1,
Point = 2,
Line = 3,
Polygon = 4,
All = 5,
}
export const geometryTypeEnumOptions = mapEnumToOptions(GeometryTypeEnum);
Thanks.
3 Answer(s)
-
0
Hi,
ABP doesn't have a dedicated enum select component like
abp-lookup-search. The standard approach is to usemapEnumToOptionscombined with a regular HTML<select>element — this is exactly how ABP's own extensible form system handles enum dropdowns internally.Here's how you can use it:
Component (TypeScript):
import { mapEnumToOptions } from '@abp/ng.core'; export enum GeometryTypeEnum { None = 1, Point = 2, Line = 3, Polygon = 4, All = 5, } // In your component class: geometryTypeOptions = mapEnumToOptions(GeometryTypeEnum);Template (HTML):
<select class="form-select form-control" formControlName="geometryType"> <option *ngFor="let option of geometryTypeOptions" [ngValue]="option.value"> {{ option.key }} </option> </select>If you want to localize the enum display names, you can use the
abpLocalizationpipe:<option *ngFor="let option of geometryTypeOptions" [ngValue]="option.value"> {{ '::Enum:GeometryType.' + option.key | abpLocalization }} </option>Then define the corresponding localization keys in your localization JSON files (e.g.,
Enum:GeometryType.None,Enum:GeometryType.Point, etc.).Thanks
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
Hi,
That's great, thanks for providing the example.
Thanks.
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
