How can I use ngFor to iterate over Typescript Enum as an array of strings

Question

I am using Angular2 and Typscript. I have an enum:

export enum Role {
    ServiceAdmin, CompanyAdmin, Foreman, AgentForeman, 
    CrewMember, AgentCrewMembe         


        

Answer 1

The scope of the template is the component instance. If you want to access something outside this scope you need to make it available from withing your component instance:

This also works if the enum keys do not start with 0

@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: `
{{item.index}}: {{item.name}}
`
})
class MyComponent {
  roles = Role;
}

See also https://stackoverflow.com/a/35750252/217408