How Do I filter data by using a drop down menu in angular? I have no idea on how to start this. I am using HTTPGet to get my data from a backend API and I need to filter my data by 1 month/2months/3months in a dropdown menu.

CodePudding user response：

Without further details:

this.myApiCall().pipe(
 map(responseArray => responseArray.filter(entry => somePredicate)),
);

CodePudding user response：

Check this one , I write it for you.

https://stackblitz.com/edit/angular-mat-select-example-9c3wcf?file=src/app/app.component.ts,src/app/app.component.html,src/app/app.module.ts

component.html

<h4>Basic mat-select</h4>
<mat-form-field appearance="fill">
  <mat-label>Favorite food</mat-label>
  <mat-select (selectionChange)="onChange($event.value)">
    <mat-option *ngFor="let month of months" [value]="month.name">
      {{ month.name }}
    </mat-option>
  </mat-select>
</mat-form-field>
<p>Api Filter Value is {{ selectedItem[0]?.name }}</p>

component.ts

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

import * as statesActions from './store/states.actions';
import { Observable } from 'rxjs';
import { Store } from '@ngrx/store';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  selectedItem = [];

  apiData = [
    { name: 'apple', month: '1 month' },
    { name: 'orange', month: '2 month' },
    { name: 'coconut', month: '3 month' },
  ];

  months = [
    {
      id: 1,
      name: '1 month',
    },
    {
      id: 2,
      name: '2 month',
    },
    {
      id: 3,
      name: '3 month',
    },
  ];

  ngOnInit() {}

  onChange(deviceValue) {
    this.selectedItem = this.apiData.filter(
      (data) => data.month === deviceValue
    );
  }
}