With string enums you can try this.
My string enum has the following definition:
enum StatusEnum {
Published = <any> 'published',
Draft = <any> 'draft'
}
and translates to js in the following way:
{
Published: "published",
published: "Published",
Draft: "draft",
draft: "Draft"
}
I have a few of these in my project so created small helper function in a shared service lib:
@Injectable()
export class UtilsService {
stringEnumToKeyValue(stringEnum) {
const keyValue = [];
const keys = Object.keys(stringEnum).filter((value, index) => {
return !(index % 2);
});
for (const k of keys) {
keyValue.push({key: k, value: stringEnum[k]});
}
return keyValue;
}
}
Init in your component constructor and Bind it to your template like this:
In component:
statusSelect;
constructor(private utils: UtilsService) {
this.statusSelect = this.utils.stringEnumToKeyValue(StatusEnum);
}
In template:
<option *ngFor="let status of statusSelect" [value]="status.value">
{{status.key}}
</option>
Don't forget to add the UtilsService to the provider array in your app.module.ts so you can easily inject it in different components.
I'm a typescript newbie so please correct me if I'm wrong or if there are better solutions.