Ionic Searchable Select Component Customisation [v4]

ionic-4-searchable-select

If you want to offer your users a list of different elements to select from, you sometimes want more power and control over the Ionic select component to offer additional functionality.

In this Quick Win we will explore the Ionic Selectable search component, a great package that can be used both pretty easily but also with a lot of customisation!

ionic-4-searchable-select

We’ll add it to our Ionic app and see a simple example, an advanced example with additional custom templates and finally also how to group elements.

Adding the Searchable Select Component

To get started, we create a new Ionic 4 app and install the the Select component component in at least version 4.4 like:

Whenever you want to use the component in one of our pages, make sure to add it to the module of the page. So in our case, we can simply add it to the app/home/home.module.ts:

That’s all for the setup of the searchable select – let’s use it!

Accessing Searchable Select from Code

To use the component you need some data. You can actually use both async data or just a regular array of data, which we will do in here.

If you want to see a more advanced example with async data just let me know!

Besides some dummy data in our class below we also add a bit more code to access the component from code! There are many functions you can directly call on it once you access it as a ViewChild like opening or closing the whole search component.

You can also catch the selected event, for now we just add a log in that case but of course it can be helpful in many cases.

Now go ahead and prepare your app/home/home.page.ts like:

Now we are really ready and prepared for our 3 different cases that follow.

1. Basic Searchable Select

The basic usage is pretty simple and only requires us to set a few values. In our case we use:

  • ngModel: Stores the selected value of the select
  • items: The data to be displayed in the select
  • itemValueField: The key of the field of your data array that will be used when the data is selected and assigned to the ngModel
  • itemTextField: The key of the field of your data that will be used as a label inside the select

There are many more fields and ways to use the component, but for now just add this simple block to your app/home/home.page.html:

This should now show the basic version of a select with the options we had as dummy data in our class.

searchable-select-basic-version

Nothing really fancy so far, we could have almost gotten here on other ways as well. Also note that the label we used in our page is used as the title of the searchable select – in the basic version so far.

2. Advanced Searchable Select Templates

Now let’s make this a bit more advanced! You can customise the searchable select by injecting templates into different slots like the header, footer, title… Yes there are really a lot of ways to customise this component, just check out the extensive documentation!

Besides the injection of some templates in the right places we also add more information upfront like:

  • #selectComponent: Needed in order to access the viewchild from code
  • canSearch: Enable the search bar
  • isMultiple: Allow selection of multiple items
  • onChange: Call our change function when the items are selected
  • headerColor: Setting the color of the header using the CSS variables
  • searchFailText: A text to display when no search result matches

Now go ahead and add the next part to our app/home/home.page.html like this:

So at this point we make use of the previously created functions of our class to control the searchable select from code.

searchable-select-advanced

Of course you can create the templates that you inject into the component completely to your needs and you can customise basically any part of this component!

3. Grouping Items in our Select

To wrap things up let’s also take a look at a bit different example with less templates. Sometimes you might want to group items, and to understand grouping you need to take a look at our initial data. For this example we use the second array groups, so we will pass this information to the component.

It’s important to note that we are still having an array of items – but the items hold their own information to which group they belong.

We also need to use 2 new properties:

  • groupValueField: The value of the group key
  • groupTextField: The name of the group key

We also add another new template which stands for the little group header that separates the different elements. If you are wondering why we need to use group.text, it’s simply because we need to access the text property of the object here, otherwise it would be an object. This doesn’t translate to any key in the data we have set up before!

Now try out the last example by changing your app/home/home.page.html one more time:

The result is a pretty cool separation between the different elements of our array.

searchable-select-grouping

As you can see from the examples above, there are super many ways to utilise the component for your Ionic apps!

Conclusion

A really powerful component that’s both easy to use and at the same time super well documented with a lot of examples on all the different use cases.

If you are looking for a great select component with additional functionalities, this package will be your best friend.

You can also find a vide version of this Quick Win below.

Leave a Reply

Your email address will not be published. Required fields are marked *