Filter dynamic values in the mat-select dropdown using the mat-select-filter component

Question

Filter dynamic values in the mat-select dropdown using the mat-select-filter component

I'm having trouble using the mat-select-filter to filter data:

<mat-form-field *ngIf="fundComplexesList">
                        <mat-select placeholder="Using array of objects">
                              <mat-select-filter [placeholder]="'Filter'"     [displayMember]="'fundComplexName'" [array]="fundComplexesList" (filteredReturn)="filteredList5   =$event"></mat-select-filter>
                            <mat-option *ngFor="let item of filteredList5" [value]="item">
                                {{item.fundComplexName}}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>

The value for fundComplexesList is fetched from an api call

    `ngOnInit(): void {
     this.agreementService.getFundComplexes(false).subscribe(data => {
     this.fundComplexesList = data;
    },
    error => {
    console.log('Error while binding FundComplex dropdown.');
    });
 `

Here's my filter method:

  `public filteredList5 =  this.fundComplexesList.slice();`

The issue arises when I try to use this.fundComplexesList value in public filteredList5 = this.fundComplexesList.slice(); function. Can anyone suggest a solution on how to ensure that the value in fundComplexesList is obtained before calling filteredList5 = this.fundComplexesList.slice();

angular typescript angular-material

Answer 1

Answer №1

HTML and TS Files for Angular Component

<mat-form-field *ngIf="fundComplexesList">
 <mat-select placeholder="Using array of objects">
   <mat-select-filter [placeholder]="'Filter'"  [displayMember]="'fundComplexName'" [array]="fundComplexesList" (filteredReturn)="filteredList5   =$event"></mat-select-filter>
     <mat-option *ngFor="let item of filteredList5" [value]="item">{{item.fundComplexName}}
     </mat-option>
    </mat-select>
  </mat-form-field>

Typescript Code in app.component.ts File

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  fundComplexesList: any = [];

  public filteredList5: any;
  constructor(private http: HttpClient) {}
 ngOnInit(): void {
     this.agreementService.getFundComplexes(false).subscribe(data => {
      this.fundComplexesList = data;
      this.filteredList5 = this.fundComplexesList.slice();
},
error => {
    console.log('Error while binding FundComplex dropdown.');
   });
  }
}

Answer 2

HTML and TS Files for Angular Component

<mat-form-field *ngIf="fundComplexesList">
 <mat-select placeholder="Using array of objects">
   <mat-select-filter [placeholder]="'Filter'"  [displayMember]="'fundComplexName'" [array]="fundComplexesList" (filteredReturn)="filteredList5   =$event"></mat-select-filter>
     <mat-option *ngFor="let item of filteredList5" [value]="item">{{item.fundComplexName}}
     </mat-option>
    </mat-select>
  </mat-form-field>

Typescript Code in app.component.ts File

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  fundComplexesList: any = [];

  public filteredList5: any;
  constructor(private http: HttpClient) {}
 ngOnInit(): void {
     this.agreementService.getFundComplexes(false).subscribe(data => {
      this.fundComplexesList = data;
      this.filteredList5 = this.fundComplexesList.slice();
},
error => {
    console.log('Error while binding FundComplex dropdown.');
   });
  }
}

Filter dynamic values in the mat-select dropdown using the mat-select-filter component

Answer №1

Similar questions

Working with Angular 4 and Typescript: Transforming JSON data with json2typescript key mapping

Encountering a 403 error when attempting to upload files to Google Cloud Storage (GCS) using Signed URLs

How to select a DOM element in Angular 2.x

Ways to programmatically move from one step to another in ngx-admin nebular stepper

Modify the data displayed on the chart by choosing the desired year from the dropdown options

Utilize Moment to retrieve the weekend dates

FormArray vertical custom validationI hope this meets your requirements

Node Express and Typescript app are failing to execute new endpoints

How to showcase unprocessed XML in an mdDialog

Guide on validating and capturing business hours data from two separate fields into one input using Angular and Reactive Forms

Issue encountered when trying to redirect after user creation on the backend

Assigning variables in Angular ngFor loopFresh way to

The distinction between <Type>function and function name():Type in TypeScript is essential to understand the various ways

Navigating through the exported components of a module without explicit type declarations

Exploring the ins and outs of data exchange within Angular 2

Exploring project references in TypeScript 3 with distinct `outDir` configurations

ngx-datatable - Displaying No Results (Angular 6)

What exactly is the purpose of the colon in JavaScript's import statement?

Is there a way to selectively filter and display certain data in an Angular data table?

Encountering Undefined Object Error in Angular Framework