Timeline for How to use a typescript enum value in an Angular2 ngSwitch statement
Current License: CC BY-SA 3.0
19 events
| when toggle format | what | by | license | comment | |
|---|---|---|---|---|---|
| May 11, 2022 at 8:00 | comment | added | serge | does it work without the private/public internal field? I need just the enumeration, not the field | |
| Aug 8, 2018 at 1:32 | comment | added | Tumeco | I found this solution, in the template you can write : {{this['MyEnum']['FirstValue']}} and you can build with --aot and --prod. If someone as a better solution? | |
| Jul 12, 2018 at 13:35 | comment | added | Vincent Sels |
Anyone encountering the 'Property does not exist on type' error with the --aot flag, you can use a service instead - see answer stackoverflow.com/a/51307059/1364650
|
|
| Jan 31, 2018 at 12:14 | comment | added | georgiy.zhuravlev |
@Danny doesn't work for me either. Property 'EnumNameHere' does not exist on type 'ComponentNameHere'
|
|
| Aug 12, 2017 at 5:23 | comment | added | Russ |
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?
|
|
| Aug 3, 2017 at 23:26 | comment | added | koppor |
@meriton The fix for that is to add MyEnum: any to the class definition.
|
|
| Jul 27, 2017 at 23:30 | comment | added | Eric Lease | @meriton I can't answer this right now, but I will research it. Theoretically I believe it should be possible, but AOT was still in pre-release when I posted this answer, and I have been working with other technologies since then. I would recommend posting a question with your specific set of constraints if you're still pursuing this approach. | |
| Jul 27, 2017 at 11:06 | comment | added | meriton | If I declare it in the component, I might as well initialize it, in which case I don't need a decorator anymore. (I know no way to declare the added property in the decorator, is there one?) | |
| Jul 26, 2017 at 13:11 | comment | added | meriton |
-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.
|
|
| Jul 18, 2017 at 7:22 | comment | added | Random | The accepted answer didn't work for me, but this one did, great ! | |
| Jun 23, 2017 at 1:08 | comment | added | Eric Lease |
@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.
|
|
| Jun 23, 2017 at 0:57 | comment | added | Eric Lease | @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. | |
| Jun 20, 2017 at 20:52 | comment | added | Simon_Weaver | I almost understand how this works, but can someone explain exactly how it does. Or if I look up 'angular decorators' will it be obvious? | |
| Jun 19, 2017 at 21:16 | comment | added | Serj Sagan |
As beautiful as this is, I have been unable to get this working in my setup. Without exports **default** class, ng build can not compile it saying that it doesn't know what that enum is, when I add default, then it says that my component doesn't exist... sad beans...
|
|
| Jun 7, 2017 at 21:15 | comment | added | TechCrunch | Wonderful solution. I hate to explicitly declare a component variable to access Enum in HTML | |
| Apr 20, 2017 at 3:58 | comment | added | Glenn |
@Danny Yes, compiled with ng build --prod --aot using angular/cli 1.0.0 with Angular 4.0.1 works fine for me.
|
|
| Mar 6, 2017 at 20:15 | comment | added | Danny | Has anyone had success using this method with the AoT compiler? | |
| Jan 21, 2017 at 1:21 | history | edited | Eric Lease | CC BY-SA 3.0 |
removed caveat - I was wrong
|
| Jan 18, 2017 at 22:17 | history | answered | Eric Lease | CC BY-SA 3.0 |