Using AEM and Angular to make a dynamically configurable filter and sort component — Part 1 | AEM Community Blog Seeding

[kautuk_sahni]

Using AEM and Angular to make a dynamically configurable filter and sort component — Part 1 by Ramachandra Pai

Abstract

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.
 Based on jQuery and,
 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.

Read Full Blog

Using AEM and Angular to make a dynamically configurable filter and sort component — Part 1

Q&A

Please use this thread to ask the related questions.