angular-enum-list

This package can be used for transformation enum's values to array where names are your own path with namespace and dictionary name to localizate word.

• Installation
• Usage
• Dictionary

Installation

1. Install package npm install angular-enum-list --save

2. Import AngularEnumsListModule to AppModule

import { AngularEnumsListModule } from 'angular-enum-list';

@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [   
    AppComponent
  ],
  import: [
    AngularEnumsListModule.forRoot('enums') // first parameter is localization namespace name,
                                           // second parameter is separator, default ':'
  ]
})
export class AppModule {}

You can configurate name of localize namespace for global context and separator which break namespace and path from localize key

Usage

Pipes

Use "enumList" pipe to get the array with translation keys:

<div *ngFor="let item of myEnum | enumList: { dictName: 'list' }" [id]="item.id">{{ item.name | i18next }}</div>

Pipe has one required parameter "dictName". It's name of dictionary in localization file. Other params are optional. You can add the folowing parametrs:

nameSpace

<div *ngFor="let item of myEnum | enumList: { dictName: 'list', nameSpace: 'my-favorite-enums' }" [id]="item.id">
 {{ item.name | i18next }}
</div>

You can specify nameSpace parameter for particularly pipes.

ignored

<div *ngFor="let item of myEnum | enumList: { dictName: 'list', ignored: ['Unknown', 'Undefined'] }" [id]="item.id">
 {{ item.name | i18next }}
</div>

Use "enumKey" to get the key of your enum field with all localization path.

 <div>{{ 'keyOfMyEnum' | enumKey: { dictName: 'list', currentEnum: _enums.myEnum, nameSpace: "my-enums"} | i18nextCap}}</div>

Pipe has two required parameters: "dictName" and "currentEnum". "dictName" is the name of dictionary in localization file. "currentEnum" is original enum, where we search the key.

in the end you get result string looks like:

<div>{{ my-enum:list.keyOfMyEnum | i18nextCap }}</div>

nameSpace

<div *ngFor="let item of myEnum | enumList: { dictName: 'list', nameSpace: 'my-favorite-enums' }" [id]="item.id">
 {{ item.name | i18next }}
</div>

Dictionary

Your own dictionary must be looks like:

ru.enums.json

{
"SexKind": {
    "Undefined": "Не выбрано",
    "Male": "Мужской",
    "Female": "Женский"
  }
}

For example you can use this list in native select in html-file:

 <select class="form-control" 
         formControlName="SexKind" 
         [(ngModel)]="model.SexKind">
    <option *ngFor='let status of enums.SexKind | enumList : { dictName: "SexKind" }'
            [ngValue]='status.id'>
        {{ status.name | i18nextCap }}
    </option>
 </select>

"enums" is public variable which contains enums you need to use in your template:

public enums = { SexKind, RaceKind };