Select based on enum in Angular2
I have this enum (I'm using TypeScript) :
export enum CountryCodeEnum {
France = 1,
Belgium = 2
}
I would like to build a select in my form, with for each option the enum integer value as value, and the enum text as label, like this :
<select>
<option value="1">France</option>
<option value="2">Belgium</option>
</select>
How can I do this ?
One more solution if you don't want to create a new pipe. You could also extract keys into helper property and use it:
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<select>
<option *ngFor="let key of keys" [value]="key" [label]="countries[key]"></option>
</select>
</div>
`,
directives: []
})
export class App {
countries = CountryCodeEnum
constructor() {
this.keys = Object.keys(this.countries).filter(k => !isNaN(Number(k)));
}
}
Demo: http://plnkr.co/edit/CMFt6Zl7lLYgnHoKKa4E?p=preview
Edit:
if you need the options as numbers instead of strings:
- replace
[value]
with[ngValue]
- add
.map(Number)
after.filter(...)
update2 simplified by creating an array
@Pipe({name: 'enumToArray'})
export class EnumToArrayPipe implements PipeTransform {
transform(value) : Object {
return Object.keys(value).filter(e => !isNaN(+e)).map(o => { return {index: +o, name: value[o]}});
}
}
@Component({
...
imports: [EnumsToArrayPipe],
template: `<div *ngFor="let item of roles | enumToArray">{{item.index}}: {{item.name}}</div>`
})
class MyComponent {
roles = Role;
}
update
instead of pipes: [KeysPipe]
use
@NgModule({
declarations: [KeysPipe],
exports: [KeysPipe],
}
export class SharedModule{}
@NgModule({
...
imports: [SharedModule],
})
original
Using the keys
pipe from https://stackoverflow.com/a/35536052/217408
I had to modify the pipe a bit to make it work properly with enums (see also How to get names of enum entries?)
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (var enumMember in value) {
if (!isNaN(parseInt(enumMember, 10))) {
keys.push({key: enumMember, value: value[enumMember]});
// Uncomment if you want log
// console.log("enum member: ", value[enumMember]);
}
}
return keys;
}
}
@Component({ ...
pipes: [KeysPipe],
template: `
<select>
<option *ngFor="let item of countries | keys" [value]="item.key">{{item.value}}</option>
</select>
`
})
class MyComponent {
countries = CountryCodeEnum;
}
Plunker
See also How to iterate object keys using *ngFor?
Here is a very straightforward way for Angular2 v2.0.0. For completeness sake, I have included an example of setting a default value of the country
select via reactive forms.
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<select id="country" formControlName="country">
<option *ngFor="let key of keys" [value]="key">{{countries[key]}}</option>
</select>
</div>
`,
directives: []
})
export class App {
keys: any[];
countries = CountryCodeEnum;
constructor(private fb: FormBuilder) {
this.keys = Object.keys(this.countries).filter(Number);
this.country = CountryCodeEnum.Belgium; //Default the value
}
}
I've preferred to have a simple utility function shared across my Angular App, to convert the enum
into a standard array to build selects:
export function enumSelector(definition) {
return Object.keys(definition)
.map(key => ({ value: definition[key], title: key }));
}
to fill a variable in the Component with:
public countries = enumSelector(CountryCodeEnum);
and then fill my Material Select as my old array based ones:
<md-select placeholder="Country" [(ngModel)]="country" name="country">
<md-option *ngFor="let c of countries" [value]="c.value">
{{ c.title }}
</md-option>
</md-select>
Thanks for this thread!
Another similar solution, that does not omit "0" (like "Unset"). Using filter(Number) IMHO is not a good approach.
@Component({
selector: 'my-app',
providers: [],
template: `
<select>
<option *ngFor="let key of keys" [value]="key" [label]="countries[key]"></option>
</select>`,
directives: []
})
export class App {
countries = CountryCodeEnum;
constructor() {
this.keys = Object.keys(this.countries).filter(f => !isNaN(Number(f)));
}
}
// ** NOTE: This enum contains 0 index **
export enum CountryCodeEnum {
Unset = 0,
US = 1,
EU = 2
}