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

Question

I'm using Angular2 and TypeScript and I have an enum:

export enum Role {     ServiceAdmin, CompanyAdmin, Foreman, AgentForeman,      CrewMember, AgentCrewMember, Customer } 

I want to use *ngFor to iterate over the enum. What is the best way to do this? Must I create a Pipe? Or is there a simpler way?

Answer 1

An enum is just an object.

Your enum is written something like this in JavaScript:

{     0: "ServiceAdmin",      1: "CompanyAdmin",      2: "Foreman",      3: "AgentForeman",      4: "CrewMember",      5: "AgentCrewMember",      6: "Customer",      ServiceAdmin: 0,      CompanyAdmin: 1,      Foreman: 2,      AgentForeman: 3,      CrewMember: 4,     AgentCrewMember: 5,     Customer: 6 } 

So you can iterate it this way (plnkr):

@Component({     ...     template: `     <div *ngFor="let item of keys()">       {{ item }}     </div>     ` }) export class YourComponent {     role = Role;     keys() : Array<string> {         var keys = Object.keys(this.role);         return keys.slice(keys.length / 2);     } } 

Or would be better to create custom pipe:

@Pipe({   name: 'enumToArray' }) export class EnumToArrayPipe implements PipeTransform {   transform(data: Object) {     const keys = Object.keys(data);     return keys.slice(keys.length / 2);   } } 

Example

Update

Typescript 2.4 allows enum members to contain string initializers like:

enum Colors {     Red = "RED",     Green = "GREEN",     Blue = "BLUE", } 

in this case you can just return Object.keys(data); from pipe.