0

I'm having trouble with this code which is Angular 2. I have something like this:

<select [(ngModel)]="postoSelecionado" name="postos-disponiveis" id="postos-disponiveis" class="sel-posto" materialize="material_select" [disabled]="!checkboxPostos.checked">
      <option *ngFor="let posto of getPostosAtivos" [value]="posto?.cdPt">{{ posto?.cdPt}}&mdash;{{ posto?.dsPt }}</option>
</select>

And I want to search through this select. I'm really struggling with this. Can we do something like a search like in the example below?

 <option *ngFor="let posto of getPostosAtivos | search:postoSelecionado" [value]="posto?.cdPt">{{ posto?.cdPt}}&mdash;{{ posto?.dsPt }}</option>
Giannis
  • 1,790
  • 1
  • 11
  • 29
Adria Vieira
  • 19
  • 7
  • What is it that should trigger a change in `getPostosAtivos`? Do you have multiple `select`? You can use a pipe like you've already suggested, but there are more efficient methods. – Daniel B Dec 11 '20 at 15:17
  • @DanielB The trigger should be the moment the user types something. He's looking for an item but the select list is too long so I want to give him the alternative to search. – Adria Vieira Dec 11 '20 at 15:38
  • Hey @Daniel B , Im still having a hard time on this, I tried what Janith said but unfortunally, it's not working properly. Is there anyway I could do this? – Adria Vieira Dec 14 '20 at 15:24

1 Answers1

1

You can use suitable npm packages matching with your requirement like ng-select: https://www.npmjs.com/package/@ng-select/ng-select for your Requirement

Or you can create your own select option.

Please check this also How to add a search filter to a select option in angular

Janith Widarshana
  • 3,213
  • 9
  • 51
  • 73
  • 1
    Thank You. I tried harder and manage to do it with ng-select. I just had to downgrade my ng-select version to the same version of the Angular I'm using. – Adria Vieira Dec 15 '20 at 18:53