How to use a typescript enum value in an Angular2 ngSwitch statement

Question

The Typescript enum seems a natural match with Angular2 s ngSwitch directive   But when I try to use an enum in my component s template  I get  Cannot read property  xxx  of undefined in        How can I use enum values in my component template   Please note that this is different from how to create html select options based upon ALL of the values of an enum  ngFor    This question is about ngSwitch based upon a particular value of an enum   Although the same approach of creating an class-internal reference to the enum appears

User · Answer

Start by considering  Do I really want to do this   I have no problem referring to enums directly in HTML  but in some cases there are cleaner alternatives that don t lose type-safe-ness  For instance if you choose the approach shown in my other answer  you may have declared TT in your component something like this  public TT             Enum defines  Horizontal   Vertical      FeatureBoxResponsiveLayout  FeatureBoxResponsiveLayout       To show a different layout in your HTML  you d have an  ngIf for each layout type  and you could refer directly to the enum in your component s HTML   ngIf  quot  featureBoxResponsiveService layout   async     TT FeatureBoxResponsiveLayout Horizontal quot   This example uses a service to get the current layout  runs it through the async pipe and then compares it to our enum value  It s pretty verbose  convoluted and not much fun to look at  It also exposes the name of the enum  which itself may be overly verbose  Alternative  that retains type safety from the HTML Alternatively you can do the following  and declare a more readable function in your component s  ts file    ngIf  quot isResponsiveLayout  Horizontal   quot   Much cleaner  But what if someone types in  Horziontal  by mistake  The whole reason you wanted to use an enum in the HTML was to be typesafe right  We can still achieve that with keyof and some typescript magic  This is the definition of the function  isResponsiveLayout value  keyof typeof FeatureBoxResponsiveLayout        return FeatureBoxResponsiveLayout value     this featureBoxResponsiveService layout value     Note the usage of FeatureBoxResponsiveLayout string  which converts the string value passed in to the numeric value of the enum  This will give an error message with an AOT compilation if you use an invalid value   Argument of type   quot H4orizontal quot   is not assignable to parameter of type   quot Vertical quot     quot Horizontal quot   Currently VSCode isn t smart enough to underline H4orizontal in the HTML editor  but you ll get the warning at compile time  with --prod build or --aot switch   This also may be improved upon in a future update

User · Answer

as of rc 6   final       export enum AdnetNetworkPropSelector       CONTENT      PACKAGE      RESOURCE     lt div style  height  100   gt             lt div  ngSwitch   propSelector  gt                    lt div  ngSwitchCase  adnetNetworkPropSelector CONTENT  gt                         lt AdnetNetworkPackageContentProps  setAdnetContentModels   adnetNetworkPackageContent selectedAdnetContentModel  gt                                       lt  AdnetNetworkPackageContentProps gt                     lt  div gt                    lt div  ngSwitchCase  adnetNetworkPropSelector PACKAGE  gt                   lt  div gt               lt  div gt                         lt  div gt    export class AdnetNetwork              private adnetNetworkPropSelector   AdnetNetworkPropSelector      private propSelector   AdnetNetworkPropSelector CONTENT

User · Answer

If using the  typetable reference  approach  from  Carl G  and you re using multiple type tables you might want to consider this way    export default class AppComponent         Store a reference to the enums  must be public for --AOT to work    public TT             CellType  CellType          CatType  CatType          DogType  DogType                 dog   DogType GoldenRetriever     Then access in your html file with     TT DogType dog         gt   GoldenRetriever    I favor this approach as it makes it clear you re referring to a typetable  and also avoids unnecessary pollution of your component file   You can also put a global TT somewhere and add enums to it as needed  if you want this you may as well make a service as shown by  VincentSels answer   If you have many many typetables this may become cumbersome   Also you always rename them in your declaration to get a shorter name

User · Answer

My component used an object myClassObject of type MyClass  which itself was using MyEnum  This lead to the same issue described above  Solved it by doing   export enum MyEnum       Option1      Option2      Option3   export class MyClass       myEnum  typeof MyEnum      myEnumField  MyEnum      someOtherField  string      and then using this in the template as    lt div  ngSwitch   myClassObject myEnumField  gt     lt div  ngSwitchCase  myClassObject myEnum Option1  gt      Do something for Option1    lt  div gt     lt div  ngSwitchCase  myClassObject myEnum Option2  gt      Do something for Option2    lt  div gt     lt div  ngSwitchCase  myClassObject myEnum Option3  gt      Do something for Opiton3    lt  div gt   lt  div gt

User · Answer

This s simple and works like a charm    just declare your enum like this and you can use it on HTML template    statusEnum  typeof StatusEnum   StatusEnum

User · Answer

Angular4 - Using Enum in HTML Template  ngSwitch   ngSwitchCase  Solution here  https   stackoverflow com a 42464835 802196  credit   snorkpete  In your component  you have   enum MyEnum    First    Second     Then in your component  you bring in the Enum type via a member  MyEnum   and create another member for your enum variable  myEnumVar     export class MyComponent    MyEnum   MyEnum    myEnumVar MyEnum   MyEnum Second           You can now use myEnumVar and MyEnum in your  html template   Eg  Using Enums in ngSwitch    lt div  ngSwitch   myEnumVar  gt     lt div  ngSwitchCase  MyEnum First  gt  lt app-first-component gt  lt  app-first-component gt  lt  div gt     lt div  ngSwitchCase  MyEnum Second  gt  lt app-second-component gt  lt  app-second-component gt  lt  div gt     lt div  ngSwitchDefault gt MyEnumVar   myEnumVar   is not handled  lt  div gt   lt  div gt

User · Answer

You can create a custom decorator to add to your component to make it aware of enums     myenum enum ts   export enum MyEnum       FirstValue      SecondValue     myenumaware decorator ts  import   MyEnum   from    myenum enum    export function MyEnumAware constructor  Function        constructor prototype MyEnum   MyEnum      enum-aware component ts  import   Component   from   angular2 core   import   MyEnum   from    myenum enum   import   MyEnumAware   from    myenumaware decorator     Component     selector   enum-aware     template         lt div  ngSwitch   myEnumValue  gt         lt div  ngSwitchCase  MyEnum FirstValue  gt          First Value        lt  div gt         lt div  ngSwitchCase  MyEnum SecondValue  gt          Second Value        lt  div gt       lt  div gt       lt button  click   toggleValue    gt Toggle Value lt  button gt           MyEnumAware     lt ---------------    export default class EnumAwareComponent     myEnumValue  MyEnum   MyEnum FirstValue     toggleValue         this myEnumValue   this myEnumValue     MyEnum FirstValue           MyEnum SecondValue   MyEnum FirstValue

User · Answer

As an alternative to  Eric Lease s decorator  which unfortunately doesn t work using --aot  and thus --prod  builds  I resorted to using a service which exposes all my application s enums  Just need to publicly inject that into each component which requires it  under an easy name  after which you can access the enums in your views  E g    Service  import   Injectable   from   angular core   import   MyEnumType   from    app enums     Injectable   export class EnumsService     MyEnumType   MyEnumType               Don t forget to include it in your module s provider list   Component class  export class MyComponent     constructor public enums  EnumsService        Input   public someProperty  MyEnumType                Component html   lt div  ngIf  someProperty     enums MyEnumType SomeValue  gt Match  lt  div gt

User · Answer

You can create a reference to the enum in your component class  I just changed the initial character to be lower-case  and then use that reference from the template  plunker    import  Component  from  angular2 core    enum CellType  Text  Placeholder  class Cell     constructor public text  string  public type  CellType        Component     selector   my-app     template         lt div  ngSwitch   cell type  gt         lt div  ngSwitchCase  cellType Text  gt            cell text          lt  div gt         lt div  ngSwitchCase  cellType Placeholder  gt          Placeholder        lt  div gt       lt  div gt       lt button  click   setType cellType Text   gt Text lt  button gt       lt button  click   setType cellType Placeholder   gt Placeholder lt  button gt          export default class AppComponent         Store a reference to the enum   cellType   CellType    public cell  Cell     constructor         this cell   new Cell  Hello   CellType Text         setType type  CellType        this cell type   type

[typescript] How to use a typescript enum value in an Angular2 ngSwitch statement

Start by considering 'Do I really want to do this?'

Alternative, that retains type safety from the HTML

Examples related to typescript

Examples related to angular