storybook: Cant use enum's in template

Describe the bug Within an Angular component, declaring a class-/template-variable that is an enum, does not work in Storybook templates.

To Reproduce

export enum Animals {
   Cat,
   Dog,
   Mouse,
}

@Component({...})
export class MyComponent {
     Animals = Animals;
     someVal = Animals.Cat;
}

<div *ngIf="someVal === Animals.Cat">Works!</div>

I noticed this already in earlier versions of Storybook. Weirdly if I rename the enum while Storybook is running, it suddenly works. But if I stop the process or make build, its not working again.

System

  System:
    OS: macOS 11.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 16.8.0 - ~/.nvm/versions/node/v16.8.0/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v16.8.0/bin/yarn
    npm: 7.21.1 - ~/.nvm/versions/node/v16.8.0/bin/npm
  Browsers:
    Chrome: 94.0.4606.81
    Safari: 15.0
  npmPackages:
    @storybook/addon-actions: ^6.4.0-beta.13 => 6.4.0-beta.13 
    @storybook/addon-essentials: ^6.4.0-beta.13 => 6.4.0-beta.13 
    @storybook/addon-links: ^6.4.0-beta.13 => 6.4.0-beta.13 
    @storybook/angular: ^6.4.0-beta.13 => 6.4.0-beta.13 
    @storybook/builder-webpack5: ^6.4.0-beta.13 => 6.4.0-beta.13 
    @storybook/manager-webpack5: ^6.4.0-beta.13 => 6.4.0-beta.13

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 3
Comments: 17 (7 by maintainers)

Most upvoted comments

I’ve bumped into this issue myself. The workaround I used was to declare enum as a getter instead of a field like this:

@Component({...})
export class MyComponent {
    get animals() {
     return Animals;
    }
}

It’s a simple workaround, but I dislike that it requires modifying the component code to make a component work with both storybook and app.

mateuszo on Mar 16, 2022

Same issue here. When running Storybook all the enums stop working, when you rename the enum and rebuild it works…

stefanoschrs on Oct 28, 2022

Coming back to Storybook 1 year later, still not fixed, still most of our components are broken. Sadly our team decided to use Storybook for a project.

MickL on Jul 14, 2022

I agree, it’s really not great having the enums not working. We use enums a lot in our templates to avoid just using arbitrary string values. And for the actual angular applications, that never posed any problem.

Crylion on Nov 28, 2022