Building an Ionic Searchable Select Component with Angular

[@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!

[@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

[@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?

[@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.

[@Letgoplaysharkxx]

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!

[@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 ?

Thanks so much!

[@galaxies_dev]

You're welcome Frank!

[@navneetvats7702]

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

[@ToddHale]

Awesome, thanks!

[@galaxies_dev]

No problem Todd!

[@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!

[@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:

[@Ammuvlogs75]

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!

[@antoniomontalvocampos3870]

How to change the color of the search bar?

[@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!

[@HOW-bt3et]

thanks mate

[@galaxies_dev]

You're welcome!

[@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

[@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}[]

[@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 ]