Angular filtering with dropdown

Question

I have the following code:

HTML:

<select>
  <option *ngFor="let item of items">{{item}}</option>
</select>

Some Angular service:

items = [
{name: "item1", type: "type1"},
{name: "item2", type: "type2"},
{name: "item3", type: "type2"}

];

And some filtering function, which filters an array by type and returns new array.

I haven't got problems with filtering by button like:

<button type="button" (click)="Filter('type2')"></button>

But I can't do it using dropdown.

UPD: Incorrect explanation. Here live demo. Need to filter array with (change) event at select tag using brandName

Will you be little more specific about the issue?

Anil Samal
– Anil Samal

2018-10-04 11:31:05 +00:00
Commented Oct 4, 2018 at 11:31 — Anil Samal
– Anil Samal, Commented Oct 4, 2018 at 11:31

Kirill · Accepted Answer · 2021-01-04 16:13:30Z

5

Set ngModel to get selected value and change event to update the list:

<select [(ngModel)]="selectedBrand" (change)="valueSelected()">
  <option *ngFor="let item of brandName">{{ item }}</option>
</select>

Then filtering items in the component when value has been changed:

public selectedBrand;
public valueSelected() {
    this.goods = this.goodsService.goods.filter(item => item.name === this.selectedBrand);
}

Demo

edited Jan 4, 2021 at 16:13

answered Oct 4, 2018 at 11:34

Kirill

4043 silver badges11 bronze badges

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

3 Comments

Yauhen Over a year ago

Thanks, but I need to filter another array. Incorrectly expressed my thoughts

Yauhen Over a year ago

Thanks a lot. It was easier than I thought.

Kirill Over a year ago

@Shiv, I updated the link to the demo. It was added by someone else and was an exact copy to the demo in the question. I added copied over code from my answer it seems to work.

mkHun · Accepted Answer · 2018-10-04 11:51:57Z

0

Try this

AppComponent.ts file

export class AppComponent{

    constructor(){}
    items = [
        {name: "item1", type: "type1"},
        {name: "item2", type: "type2"},
        {name: "item3", type: "type2"}
    ];

makeArr(e){
    console.log(e);
}

}

html

<select (change)='makeArr($event.target.value)'>
    <option *ngFor="let item of items">{{item.name}}</option>
</select>

you are having the problem with displaying the value from the object. retrieve the value of the object using . or you can use the []

edited Oct 4, 2018 at 11:51

answered Oct 4, 2018 at 11:39

mkHun

5,9479 gold badges45 silver badges96 bronze badges

Collectives™ on Stack Overflow

Angular filtering with dropdown

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related