I hate magic things. In programming, I mean. I try to avoid magic strings and magic numbers as much as possible because I can barely remember the thing I typed five seconds ago, let alone something that you have to maybe type five hours from now. So, I tend to use a lot of enums for my magic numbers.
<Select>
Creating a drop down list based on an enum makes sense, especially since it is easy to specify a “key” and a “value” for each option:
Type Promiscuity
The problem with the above is that when you select a value from the dropdown, even though you specify the value to be matched the numeric value property of the MyStuff object, it will make it a string. TypeScript makes it easy to avoid randomly changing your types, but at runtime all bets are off. This means if you’re trying to do a type and value equivalence check (===) to a number, it fails.
ngModelChange
Its not fantastic, but we can get around this by adding an ngModelChange event handler to the select. Inside, we simply assert that this is going to be a number, and everything gets made right.