Skip to main content

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

17
  • 7
    Has anyone had success using this method with the AoT compiler?
    – Danny
    Commented Mar 6, 2017 at 20:15
  • 2
    @Simon_Weaver decorators are essentially functions that take a function as a parameter and extend the behavior of that function. In the case of ES6/7, we're dealing with the extension/annotation of classes. Here's a high level article about how they work. The proposal for implementation in ES7 is on github - currently in stage 2. In that proposal, they touch on possible uses for decorators. TypeScript, being a superset of JS, includes this feature.
    – Eric Lease
    Commented Jun 23, 2017 at 0:57
  • 2
    @Simon_Weaver In this case, the syntactic sugar is hiding the call to MyEnumAware(), where the EnumAwareComponent instance is passed, and has a property, MyEnum, added to its prototype. The value of the property is set the enum itself. This method does the same thing as the accepted answer. It's just taking advantage of the syntactic sugar proposed for decorators and allowed in TypeScript. When using Angular you're using decorator syntax right off the bat. That's what a Component is, an extension of an empty class that Angular's core classes know how to interact with.
    – Eric Lease
    Commented Jun 23, 2017 at 1:08
  • 5
    -1: This does not appear to work with aot, resulting in ERROR in ng:///.../whatever.component.html (13,3): Property 'MyEnum' does not exist on type 'EnumAwareComponent'. This makes sense, because the property the decorator adds is never declared, leaving the typescript compiler unaware of its existence.
    – meriton
    Commented Jul 26, 2017 at 13:11
  • 3
    So I've been using this for 4+ months. However, now that I'm doing a --prod build (Ionic 3 / Angular 4 / Typescript 2.4.2) it no longer works. I get the error "TypeError: Cannot read property 'FirstValue' of undefined". I'm using a standard numeric enum. It works fine with AoT but not with --prod. It does work if I change it to using integers in the HTML, but that's not the point. Any ideas?
    – Russ
    Commented Aug 12, 2017 at 5:23