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.

Nehal · Accepted Answer · 2017-07-20 18:20:25Z

7

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

edited Jul 20, 2017 at 18:20

answered Jul 14, 2017 at 21:32

Nehal

13.3k4 gold badges48 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

OptimusPrime Over a year ago

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 Over a year ago

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

Nehal Over a year ago

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 Over a year ago

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 Over a year ago

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

|

Bogdan Bogdanov · Accepted Answer · 2017-07-14 21:16:18Z

Really basic implementation of that will to add two-way binding on the select tag plus onChange function

<div>
    <label for="input-one">select</label>
</div>
<div>
    <select [{ngModel}]="someProperty" (change)="changeTableContent()">
        <option value="">--- Select ---</option>
        <option value="ABC">ABC</option>
        <option value="def">def</option>
   </select>
</div>

Your property will have the selected option value and you can do whatever you want with the table content then. The implementation of the table content filter is not so easy, so I better suggest you use a third party tool for this.

In the onChange function, you could implement some like this

public changeTableContent() {
   if(this.someProperty === 'ABC') {
    //Get the json data and add it into the table.
   }
}

Don't forget to add FormsModule to the module you are implementing this functionality because ngModel is part of FormsModule.

Collectives™ on Stack Overflow

How to filter data with select dropdown using Angular 2?

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related