Can Angular's template for loop loop through an enum?

Question

I'm reviewing this bit of code that is the model for a select filter component for Todos:

    export enum VISIBILITY_FILTER {
      SHOW_COMPLETED = 'SHOW_COMPLETED',
      SHOW_ACTIVE = 'SHOW_ACTIVE',
      SHOW_ALL = 'SHOW_ALL'
    }

    export type TodoFilter = {
      label: string;
      value: VISIBILITY_FILTER;
    };

    export const initialFilters: TodoFilter[] = [
      { label: 'All', value: VISIBILITY_FILTER.SHOW_ALL },
      { label: 'Completed', value: VISIBILITY_FILTER.SHOW_COMPLETED },
      { label: 'Active', value: VISIBILITY_FILTER.SHOW_ACTIVE }
    ];

It looks as if all of that could be replaced with:

export enum VISIBILITY_FILTER {
  SHOW_COMPLETED = 'Completed',
  SHOW_ACTIVE = 'Active',
  SHOW_ALL = 'All'
}

So the active filter property would just be typed by the enum VISIBILITY_FILTER and we would loop through then enum in the template like this (Pseudo code):

    <option *ngFor="let filter of VISIBILITY_FILTER;" [ngValue]="filter">{{VISIBILITY_FILTER[VISIBILITY_FILTER.filter]}}
    </option>

Does that seem reasonable or did I miss something?

Possible duplicate of How does one get the names of TypeScript enum entries? — Damian Chrzanowski
– Damian Chrzanowski, Commented Aug 20, 2018 at 19:49
I'm certain its not a duplicate, the OP wants to iterate the enum in angular, not get the names. — speciesUnknown
– speciesUnknown, Commented Aug 20, 2018 at 20:45

derelict · Accepted Answer · 2018-08-20 20:19:40Z

6

try:

public get visFilterValues() {
  return Object.keys(VISIBILITY_FILTER).map(k => VISIBILITY_FILTER[k]);
}

and

<option *ngFor="let filter of visFilterValues" [ngValue]="filter">{{filter}}</option>

answered Aug 20, 2018 at 20:19

derelict

2,08012 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can Angular's template for loop loop through an enum?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related