How to filter data with select dropdown using Angular 2?

Question

I want to show different values from JSON data depending on a drop down selection inside a table using angular 2.

<div>
    <label for="input-one">select</label>
</div>
<div>
    <select>
        <option value="">--- Select ---</option>
        <option value="ABC">ABC</option>
        <option value="def">def</option>
   </select>
</div>

For example:

If you select ABC, it should show values matching ABC from JSON data in the table. If you select def, it should show values from matching from JSON data in the table.

I want to do this in Angular 2. Please suggest me what could be the solution.

Solution

The simplest way is to bind the select with an ngModel and pass in the selection value to a function that matches it with an object.

sample html:

<div>
    <select [(ngModel)]="selected" (ngModelChange)="onSelect(selected)">
        <option *ngFor="let option of options" 
                [value]="option"> 
          {{ option }}
        </option>
   </select>
</div>
<p></p>
<div>Selected Option</div>
<div>{{ selected }}</div>

<table>
  <th>Value</th>
  <th>id</th>
  <tr *ngFor="let x of selectedData">
    <td>{{x?.value}}</td>
    <td>{{x?.id}}</td>
  </tr>
</table>

sample component.ts:

someData = [{ value: "ABC",id:"123"},
          { value: "ABC",id:"12"},
          { value: "DEF",id:"23"},
          { value: "DEF",id:"1233"},
          { value: "ABC",id:"13"},
          { value: "DEF",id:"1"},
          { value: "DEF",id:"34"},
          { value: "ABC",id:"56"},
          { value: "ABC",id:"13"},
          { value: "DEF",id:"123"},
          { value: "HIJ",id:"113"}]

options =['ABC', 'DEF']

selected;
selectedData;

constructor(){
  this.selectedData = this.someData;
}

onSelect(val){
  console.log(val);
  this.selectedData = this.someData.filter(x => x.value == val)
}

demo

Comments

[OptimusPrime]

Sorry for the late reply Nehal, what i meant above is if i select ABC from drop down, it should filter the json data and display the list/records matching ABC.

[Nehal]

Hi @VishalK, did you mean something like this? plnkr.co/edit/UD51OA?p=preview

[Nehal]

Yes, I get the scenario. But I don't know how your json data table looks like. So I have provided you an example of how you can filter a json array based on selection from 'select'. If you need a precise solution, create a plunker or you can fork my plunker and recreate the exact scenario and share the link.

[OptimusPrime]

Kind of Nehal, but what i am trying to achieve is in table under a column i have 10 records like ABC ABC ABC ABC DEF DEF ABC ABC ABC DEF.when i selct ABC from the dropdown i should only see ABC in the table but not DEF and vice versa. l hope you got it :(

[Nehal]

Based on what you said, here's another version plnkr.co/edit/I8Zbd5?p=preview

[OptimusPrime]

can you look into this version plnkr.co/edit/L356YQjRSmoW0wtZx4Pf?p=preview

[Nehal]

seems like pretty straight forward as my last example. You just added one more field of id. Here's the updated one plnkr.co/edit/seDeBYZ1TlATAzI20yfz?p=preview

[Nehal]

Oh great, thanks for letting me know. I have updated the answer :)

[OptimusPrime]

i am trying to apply filter on top of another filter.For example if i select ABC from the first drop down, the second dropdown should display values related to ABC only but not the others, how can i achieve this ?any suggestions Nehal ?