Angular 2 IndexOf Pipe

Article Purpose

The purpose of this article is to provide an Angular 2 Pipe that allows any object collection to be declaratively filtered on any number of specific property names by a dynamic value.

There are a few discreet characteristics that make IndexOfPipe valuable:

declarative
any object collection
any specific property name(s)
any dynamic value

What was known as the "Filter Filter" in Angular 1 could have performance implications as every property (as opposed to a select set of properties) was checked. In addition, they would run on each $digest cycle.

You still need to do your own performance testing, but mgcrea has a gist for an Angular 2 FilterPipe that may be of interest over IndexOfPipe.

Also, when working with large data sets it will likely be a better approach to use a service instead of a pipe. You lose the declarative nature at a likely gain in performance. John Papa has a FilterService that may be of interest.

Why IndexOfPipe?

Since the above description is abstract, let's look at an actual scenario. The simplest scenario of where IndexOfPipe is useful would be when a single text input field's value needs to filter a list (of image models in this case) where each model instance has many properties. Let's say each has a name, tags, and location property. With IndexOfPipe you can declaratively have the single dynamic input value match against any single or combination of the three property values. This results in an automatically filtered list.

Simple Example

Let us first look at the simpler declarative example:

Let's focus on just the contents of the structural *ngFor directive:

Feel free to refresh on Parameterizing a Pipe from the Angular 2 docs as this is how we pull off the "any specific property name(s)" and "any dynamic value" aspects.

We are declaring we want an <img> for each image model found in the imageSettings.images array. However, we want to filter the array based on two conditions:

each image model (let's call it imgModel) must have a name property (arg 1)
the imgModel.name.indexOf(imageSettings.filterQuery) operation must pass (arg 2)

The list will be filtered according to the imageSettings.filterQuery value's presence within the value of the name property.

Extended Example

As mentioned IndexOfPipe can handle any property name(s). So let's add plurality. We do so simply by passing another string value to the array of property names. Nice and simple:

Now the list will be filtered when the imageSettings.filterQuery input string value exists in any of the name, tags, or location property values. Kinda cool.

A possible next logical step would be to make the imageSettings.filterQuery argument an array as well. This could be useful, but I'm going to draw the line here. Feel free to take it to the next level if what you're creating would benefit.

Don't forget to keep an eye on performance with larger data sets and always consider the FilterService approach mentioned above.

Code

Once Angular 2 officially launches, I'll make a simple codepen to provide the interactive example discussed in this article. In the mean time, you can get it on Github and run it locally. Hit me up on Twitter @derekknox if you have any thoughts or improvement ideas.

IndexOfPipe on Github