How can I filter by two attributes at the same time with mat-select-filter, in Angular?

Question

I am using the mat-select-filter library and in the displayMember it is filtering by code only. I want to be able to filter by name and at the same time by code. I am using Angular and Typescript. How can I do it?

<mat-select-filter [placeholder]="'Buscar..'" [array]="estaciones" [displayMember]="'codigo'" (filteredReturn)="filteredEstaciones = $event"></mat-select-filter>
    <mat-option *ngFor="let item of filteredEstaciones" [value]="item.id">
        {{ item.codigo }} - {{ item.nombre }}
    </mat-option>

Answer 1

With Angular's mat-select-filter, you can change the displayMember property to include the codigo and nombre attributes in order to simultaneously filter by two characteristics. To accomplish this, create a new property in your component and use it as the displayMember. This property will mix the codigo and nombre attributes.

combine the codigo and nombre attributes into a new property that you create in your component:

estaciones.forEach(estacion => {
  estacion.displayName = `${estacion.codigo} - ${estacion.nombre}`;
});

Next, modify your HTML code such that the displayMember is the new displayName property:

<mat-select-filter [placeholder]="'Buscar..'" [array]="estaciones" [displayMember]="'displayName'" (filteredReturn)="filteredEstaciones = $event"></mat-select-filter>
<mat-option *ngFor="let item of filteredEstaciones" [value]="item.id">
  {{ item.displayName }}
</mat-option>

mat-select-filter now filters by both codigo and nombre attributes simultaneously.