In this post, I’ll show how to easily use angular filters in order to dynamically replace content in your app when you use enums.
Enums are a kind of dictionary that helps manage your app – and even more importanly – can help communicate with the server.
Let’s see an example in which you receive a list of enums from the server, and need to use it across your app:
What we see here is quite simple: we have a list of enums that is being parsed by a controller, and then shown as a list of checkboxes. Works quite lovely.
But with this method, we would need to do the parsing for all of the enums. Besides, every time we want to address the enum from our controller, we’d need to “guess” the correct index… what if we had an unknown number of enums?
So another solution would be to create a function to do the conversion for us every time we need. That sounds good only that… where do we put it so it would make sense? We really want the whole app to use it.
Here come filters to the rescue! In the following example, I’ll show how easy it is to manipulate various kinds of data using only 2 filters:
- ‘enumsFilter’, which takes an enum and an enum category (for instance, 1 and dolls) and returns the string value.
- ‘enumsListFilter’, which takes an enum category and returns the object we can use in order to create select boxes etc.
Enough said, let’s take a look:
Well… this example is not too different from the function we wanted to create, but here are 2 exmples that show the advantage of this approach.
In the above examples, I’ve added two “dynamic” select boxes using the filters. Again, this is something that can be easily achieved using a regular function or by creating some object that is composed of the nums (like in the checkbox example). The advantage here is not in the form it is done, but in the fact we can use this filter ANYWHERE in our app – even in 3rd party modules that allow us to use/override html templates (some, like in the example below, have a special API for filters):
And if we combine the select and the filter with the grid: