Filtering based on dropdown list in angular 4

Question

I have an invoice list table with amount, date, invoice number, status etc. I created a drop down list that contains status in it. If I selected the status in the drop down list I need the table to be filtered and show only the row which contains the selected status.

I am just studying the angular 4. I tried the following code but it is not working.

In HTML Page:

<select [(ngModel)]="selected" name="status" placeholder="select" (ngModelChange)="onOptionsSelected($event)">
        <option *ngFor="let sta of status" [ngValue]="sta">{{sta}}</option>
    </select>

In Component.ts Page:

   selected:any;

    stat = [
        { value: "All", id: "123" },
        { value: "Unpaid and sent", id:"12" },

        { value: "Unpaid and sent",id:"23" },
        { value: "Unpaid and not sent" ,id:"45"},
        { value: "Unpaid with due date",id:"56" },
        { value: "Paid",id:"57" },
        { value: "Open",id:"78" },
        { value: "Overdue" ,id:"45"}];

    status = ['Select Status', 'All', 'Unpaid and sent', 'Unpaid with due date', 'Paid', 'Open', 'Overdue'];

constructor() {
        this.selected = this.stat;
        }

        onOptionsSelected(event) {
        let value = event.target.value;
         console.log(this.selected);

    }

Can anyone please help me? Thanks

Did the answer help

Sajeetharan
– Sajeetharan

2018-05-23 03:10:52 +00:00
Commented May 23, 2018 at 3:10 — Sajeetharan
– Sajeetharan, Commented May 23, 2018 at 3:10

Sajeetharan · Accepted Answer · 2018-05-23 02:51:13Z

1

The issue above is that you are setting array as selected, just remove that line inside the constructor,

constructor() {
   this.selected = this.stat; //Not necessary
}

And, You can use array.filter with the ngModel selected

onOptionsSelected() {
      console.log(this.selected); 
      this.filtered = this.stat.filter(t=>t.value ==this.selected);
}

STACKBLITZ DEMO

edited May 23, 2018 at 2:51

answered May 23, 2018 at 2:46

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

5 Comments

Midhu James Over a year ago

But the problem is it is not displaying in table format. It displays as [{ amount:65, status; paid}]. How to change it?

Sajeetharan Over a year ago

You need to use ngFor

Sajeetharan Over a year ago

Mark if the answer helpee

Midhu James Over a year ago

Ya it is very helpful. Thanks

Hello Over a year ago

@Sajeetharan, Can you please update the link? It is broken. I have a similar case and I need it.

Collectives™ on Stack Overflow

Filtering based on dropdown list in angular 4

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related