I think I mentioned this in a previous post, but Angular 2 removed the built in filter pipe.  Which means we get to build our own- and it was pretty fun (though we went with a service instead of a pipe in this case).  But there was one ‘gotcha’ we ran into.

The filter started off as more of a search service- a user types in an input box and the list of items below filters by whatever they type (they could also choose the filter criteria- name, email, status, etc).  But the man upstairs (the project manager, not Jesus), was thinking the filter should be based on a drop down.  For example- our application will have an audit log.  To filter that audit log, you can choose a couple select options: 1) The criteria (activity type, username, etc), and 2) The specific entry to filter by.

So a user selects ‘activity type’ from the first drop down, then ‘Successful Login’ from the second, and the log below displays just the entries for successful logins.  Makes sense- and we could still use the same method of co-opting a FormControl object to do the ‘onselect’ updating:

this.filterSubscription = this.term.valueChanges
            .subscribe(term => this._searchService.findItems(term, this.originalLog, this.filterParam)
                .then((filteredLog) => {
                    this.audit = filteredLog;

Sorry about the formatting- haven’t quite figured out the WordPress editor code formatting technique.

filterSubscription is a manually created rxjs Subscription object, term is a FormControl object, and filterParam is a simple string that represents the criteria for the filter.  When the component originally inits, we set the originalLog array to equal the audit array.  That way, in the searchService, we can return a Promise of either the items in the audit array that match the criteria, or the original log if none.

All works great (or, at least, it works).  Except when switching between filter criteria.  We couldn’t seem to get an initial value into the drop down select box.  It seemed to either be a choice between having the first item in the audit array be the default ‘selected’ option (in which case, our list was sorting by that criteria by default), or have nothing in the box as a default selection (which works, but doesn’t look great).  See next week’s entry for a possible (messy) solution!



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s