I am already in awe of AEM and now …….
I am discovering the way Angular complements it !!
Together these two can create magic and we are about to see an example in this story.
Recently we had a requirement to filter components based on tags configured in the API response. For this, we started out with two parallel approaches.
1️⃣ Based on jQuery and,
2️⃣ Using Angular.
In jQuery, we had to iterate through the array and apply custom comparison logic to get the array sorted one way. Although we were not doing bad, we were missing out on something good.
Angular clearly had the upper hand since filter and sort (both ways) can be done using Angular with fewer lines of code and using limitTo, we can restrict the entries so displayed.
But the challenge was making it work with AEM. We had to make both the filter and the count authorable.
Why did I choose Angular over jQuery?
The requirement was to filter using tags but in the midst of my development I figured out that this can be extended to filter by any property present in the API response. Which means it makes it even more reusable now! And it’s fast.
I just need to instruct the content authors on how to get the authoring correct.