Building an Ionic Searchable Select Component with Angular

We build a cool reusable searchable select component with Ionic Angular so we don't rely on any external packages anymore!
🔥 The fastest way to learn Ionic: ionicacademy.com/
⚡️ Just getting started?
Grab a free 46 pages eBook: ionicacademy.com/ionic-quicks...
#############################
👨‍💻 Want to read instead of watch?
Here's the full Ionic tutorial: ionicacademy.com/ionic-search...
🤷‍♂️ Want more Ionic tutorials?
There you go: devdactic.com/
#############################
❤️ You can also find me on:
Instagram: / simongrimm_
Twitter: / schlimmson
Facebook: / devdactic
TikTok: / simongrimm_
Or join the Simonics Facebook group:
/ simonics
#############################
00:00 Intro
00:57 Standalone Component Setup
03:03 Opening the Modal
07:35 Passing Data to the Component
10:19 Displaying the Data
16:55 Emitting Data from the Searchable Select
20:51 Adding the Search Functionality
27:46 Outro
#ionic #angular #webdevelopment

[@galaxies_dev]

Learn to build epic IONIC apps FAST by joining the Ionic Academy: ionicacademy.com/

[@leonardopillay4200]

Simon, you're a legend I've been waiting for this feature from ionic for years now.

[@galaxies_dev]

Haha thanks Leonardo!

[@irohwavez]

This is the first time I've done a standalone component, which has been on my whiteboard to try out for a while now. Thank you for doing this. Also, that leaf function is HOT. Thanks for sharing.

[@galaxies_dev]

Glad I could help Jason!

[@nofamilyreview8251]

Thanks Simon for getting us updates. I like the inline modal. I was able to create a country filtering search with my rest api in my app.

[@galaxies_dev]

Yeah that's a nice addition!

[@hassenmohammed3176]

thanks Simon! One reason I really enjoy using Ionic/Angular is because of your channel.

[@galaxies_dev]

Thank you Hassen 🙌

[@mugambialois4941]

Thank you for this component Simon. How would you load default selection, like case in point when you are editing a form and you have a value that should be selected

[@ToddHale]

Awesome, thanks!

[@galaxies_dev]

No problem Todd!

[@ersachin139]

Thanks Simon! This is really awesome. One query, I am trying the same but when I type something and filter the result, the changes are not reflecting in ion-modal. I can see changes outside ion-modal. Could you please help in this?

Thanks so much!

[@galaxies_dev]

You're welcome Frank!

[@peterchapman6210]

Thankyou for this! I had been using Ionic Selectable, but it is stopping my being able to update to Ionic 7. I don't suppose you have tried using dk-virtual-scroll-viewport in this to get virtualization (or be a good another video)? I have tried but can't get it working right (itemHeight and scrolling issues), so we can handle large lists.

[@victorbravo2409]

what is the pluging to see the functions of the component in html? thanks

[@csgogeneral5729]

How I should use fill=outline, right now it says deprecated and I should use it on ion-input or ion-textarea. But with this we don't even have ion-input or ion-textarea!? Right now using:

[@navneetvats7702]

Could you please share the repository for the same, My Search is not working

[@HOW-bt3et]

thanks mate

[@galaxies_dev]

You're welcome!

[@leonardopillay4200]

Fixes for a few bugs when filtering on single select : itemSelected() { if (!this.multiple) { if (this.selected.length) { this.selected[0].selected = false; this.selected = []; } this.selected = this.data.filter((item) => item.selected); if (this.selected.length) { this.selectedChanged.emit(this.selected); this.isOpen = false; this.filtered = [...this.data]; } } }

[@galaxies_dev]

Thanks for sharing your fix Leonardo!

[@Matheus_1582]

Hello Simon create an Angular project with this command. npm init ng once it starts you type the name of the project, then choose Angular V14 and then choose Angular V14 in blue color.

[@abhilashkatta2593]

How can we select all/deselect all , is there any way for that ?

[@antoniomontalvocampos3870]

How to change the color of the search bar?

[@Supersuma5]

Hello simon ! please clarify my doubt can we use packages in ionic 6 if yes what are those packages plz reply me.

[@galaxies_dev]

It depends more on the Angular version than your Ionic version!

[@sven_93]

So what happens if the data you pass in to this component actually has a "selected" property. Will it be overwritten by the checkboxes?

[@auredud461]

We can wrap the data items by a custom interface. By example: {data: ItemType, selected: boolean}[]

[@bodhisatba]

Hey simon, i had the thought the ther day when i saw this video, why he uses indexOf? I used this but my first uninformed thought was use includesi think. Now google suggested some article about JavaScript function string search and i clicked. And it says that includes is the fastes function. Then, why did you choose indexOf?

[@bodhisatba]

Array.some 285688.7 Ops/sec Array.filter 95376.8 Ops/sec Array.indexOf 1352013.0 Ops/sec Array.includes 4575837.0 Ops/sec Array.find 285742.5 Ops/sec

[@galaxies_dev]

I'm not always making the best choices so well done on that research - pick the way that's faster!

[@sameersameer5288]

Hi there, I have a query Can we make AR VR app using ionic angular? Thanks

[@galaxies_dev]

I think it's possible, but I will have to dive deeper into that topic!

[@sameersameer5288]

@@galaxies_dev 👍👍👍 Thanks

[@jaswindersingh219]

@simon time has come you start a single playlist of an complete admin panel using ionic(ios & android included) Also starting a open repo for such industry level projects are also good idea

[@galaxies_dev]

Good idea for a livestream project maybe!

[@jaswindersingh219]

@@galaxies_dev yes so that the public can be confident to use ionic for the main stream.

[@kitty_cat687]

very nice! only about the search, i thing ng2-search-filter is easier. html ts filter: string module.ts import { Ng2SearchPipeModule } from 'ng2-search-filter'; imports: [ ... Ng2SearchPipeModule ]