Angular InstantSearch demo app

Hey all,

As you might have seen, we just released the Angular 4 & 5 version of Instantsearch.

Now, I hadn’t used Angular since a very early version of Angular 2 so I was keen to see how things had changed, so I decided to take some time to translate an existing Instantsearch project I had written in vanilla JS and jQuery over to Angular and our new library.

It was actually a really nice experience. Sure Angular is still pretty bloated when you build out an app from the CLI tools, but translating the vanilla JS components for Instantsearch over to Angular was pretty intuitive.

As of right now, a widget for making <select> dropdowns isn’t in the Angular version of Instantsearch, so I had to build my own. This was a great opportunity to test out the new Connector elements of the library that allows you to extend and build upon the widgets that already exist. Pretty powerful stuff.

Side by side, here’s the vanilla JS version, and here’s the Angular 5 version. They both make heavy use of the Instantsearch widgets.

You’ll notice a few subtle differences in the CSS but other than that the functionality was easy to replicate out of the box. A fun project to get to grips with the new library!

1 Like

That’s pretty awesome! Only thing I noticed was that you don’t have “No results” shown in the Angular 5 version, but I’d imagine this would be easy to adjust regardless.