Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add a search filter to a select option in angular

I'm trying to add to add a search filter in my select option list because there are many options and I think that without a search, it will not be easy for the user to find the option that he wants to select.

I hope you will understand me because I'm not good at English.

Here's my code (it's just a part of my table)

<ng-container *ngFor="let menaceProcessus of menaceProcessusTab">
    <tr>
         <td colspan="4" bgcolor="#f1f1f1"><b>{{menaceProcessus?.processus?.nom}}</b></td>
    </tr>
    <ng-container *ngFor="let actif of menaceProcessus?.actifs">
        <tr>
            <td [rowSpan]="actif?.menaces?.length+1">{{actif?.actif?.nom}}</td>
        </tr>
     <ng-container *ngFor="let mnVuln of actif?.menaces">
        <tr>
             <td>{{mnVuln?.vulnerabilite?.nom}}</td>
             <td>
                 <select class="form-control" 
                  (change)="mnVuln?.menaceActif?.menace.id = $event.target.value; 
                            updateMenaceProcessus()">
                      <option></option>
                      <option *ngFor="let menace of menaces" 
                          [value]="menace.id" 
                          [selected]="menace.id === mnVuln?.menaceActif?.menace.id">
                        {{menace.nom}}</option>
                  </select>
              </td>
              <td>
                 <input class="form-control" 
                    type="text" [value]="mnVuln?.menaceActif?.probabilite"> 
              </td>
          </tr>
      </ng-container>
    </ng-container>
 </ng-container>
like image 475
PowerGirl Avatar asked Aug 23 '19 11:08

PowerGirl


People also ask

How do I filter in select?

Select any cell within the range. Select Data > Filter. Select Text Filters or Number Filters, and then select a comparison, like Between. Enter the filter criteria and select OK.

How do you filter the data with a common search bar at the top of angular 8?

We create a new event emitter in order to emit the value from the header component to body component. searchThis function will trigger the event for every keypress in the search input field. We use event binding to pass the data from header to parent . newArray is the array contains the data for the component.

How to perform angular Search Filter on input field using angular?

Angular doesn’t have a search filter pipe, we will make our own custom search pipe to perform Angular search filter on the input field. Let first create a custom pipe using the following command. ng g pipe searchFilter Edit search-filter.pipe.ts file to filter list based on user type text criteria of input field data.

How to add search to HTML code using Angular Material?

Once you have Angular material installed, you need to import MatSelectModule and use Material Select in your app. Now let’s add a search input to the HTML code. Start by importing the MatInputModule. Also add the MatInputModule to imports array. Add the search input to the app.component.html. Create a filter pipe called search using the cli.

What is pipe operator in angular Search Filter?

This symbol defines the Pipe Operator in angular. Throughout this Angular Search Filter tutorial, you will use the pipe symbol to filter the data. Bootstrap is a robust front-end framework applied to build modern web and mobile applications. It reduces the pain of writing code from scratch for HTML and CSS, most importantly open-source.

How to add a search input to an angular app?

To get started, you need to install Angular material to your Angular app. Once you have Angular material installed, you need to import MatSelectModule and use Material Select in your app. Now let’s add a search input to the HTML code. Start by importing the MatInputModule. Also add the MatInputModule to imports array.


1 Answers

If you want to filter in select option, you can use datalist control of HTML. If you use it, there is no need to do extra coding for filtering. It has built-in functionality for filtering.

HTML :

<input list="menace" name="menace">

<datalist id="menace">
     <option *ngFor="let menace of menaces">{{menace.nom}} </option>
</datalist>
like image 102
Parth Dhankecha Avatar answered Oct 19 '22 16:10

Parth Dhankecha