Building an Ionic Searchable Select Component with Angular

แชร์
ฝัง
  • เผยแพร่เมื่อ 31 ธ.ค. 2024

ความคิดเห็น • 40

  • @galaxies_dev
    @galaxies_dev  ปีที่แล้ว

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

  • @irohwavez
    @irohwavez 2 ปีที่แล้ว +1

    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
      @galaxies_dev  2 ปีที่แล้ว

      Glad I could help Jason!

  • @leonardopillay4200
    @leonardopillay4200 2 ปีที่แล้ว +2

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

  • @mugambialois4941
    @mugambialois4941 2 ปีที่แล้ว

    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
    @ersachin139 ปีที่แล้ว +1

    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?

  • @abhilashkatta2593
    @abhilashkatta2593 ปีที่แล้ว

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

  • @peterchapman6210
    @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.

  • @leonardopillay4200
    @leonardopillay4200 2 ปีที่แล้ว +2

    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
      @galaxies_dev  2 ปีที่แล้ว

      Thanks for sharing your fix Leonardo!

  • @antoniomontalvocampos3870
    @antoniomontalvocampos3870 ปีที่แล้ว

    How to change the color of the search bar?

  • @victorbravo2409
    @victorbravo2409 2 ปีที่แล้ว

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

  • @csgogeneral5729
    @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
    @navneetvats7702 2 ปีที่แล้ว

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

  • @hassenmohammed3176
    @hassenmohammed3176 2 ปีที่แล้ว

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

  • @Ammuvlogs75
    @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
      @galaxies_dev  ปีที่แล้ว

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

  • @bodhisatba
    @bodhisatba 2 ปีที่แล้ว

    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
      @bodhisatba 2 ปีที่แล้ว +1

      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
      @galaxies_dev  2 ปีที่แล้ว

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

  • @Matheus_1582
    @Matheus_1582 2 ปีที่แล้ว

    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.

  • @sameersameer5288
    @sameersameer5288 2 ปีที่แล้ว

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

    • @galaxies_dev
      @galaxies_dev  2 ปีที่แล้ว +1

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

    • @sameersameer5288
      @sameersameer5288 2 ปีที่แล้ว

      @@galaxies_dev
      👍👍👍 Thanks

  • @sven_93
    @sven_93 2 ปีที่แล้ว

    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
      @auredud461 2 ปีที่แล้ว +1

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

  • @Letgoplaysharkxx
    @Letgoplaysharkxx 2 ปีที่แล้ว

    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
      @galaxies_dev  2 ปีที่แล้ว

      Yeah that's a nice addition!

  •  ปีที่แล้ว +1

    Thanks so much!

  • @ToddHale
    @ToddHale 2 ปีที่แล้ว +1

    Awesome, thanks!

  • @jaswindersingh219
    @jaswindersingh219 2 ปีที่แล้ว

    @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
      @galaxies_dev  2 ปีที่แล้ว +1

      Good idea for a livestream project maybe!

    • @jaswindersingh219
      @jaswindersingh219 2 ปีที่แล้ว

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

  • @HOW-bt3et
    @HOW-bt3et 6 หลายเดือนก่อน

    thanks mate

    • @galaxies_dev
      @galaxies_dev  6 หลายเดือนก่อน +1

      You're welcome!

  • @kitty_cat687
    @kitty_cat687 2 ปีที่แล้ว

    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
    ]