Is there a way to simultaneously filter by two attributes using mat-select-filter in Angular?

I have integrated the mat-select-filter library in my Angular project, but I am facing an issue with the displayMember filter. Currently, it only filters by code, but I would like it to also filter by name simultaneously. Is there a way to achieve this using Angular and Typescript?

<mat-select-filter [placeholder]="'Search..'" [array]="stations" [displayMember]="'code'" (filteredReturn)="filteredStations = $event"></mat-select-filter>
    <mat-option *ngFor="let item of filteredStations" [value]="item.id">
        {{ item.code }} - {{ item.name }}
    </mat-option>
angulartypescriptangular-materialmat-select

Answer №1

Utilizing Angular's mat-select-filter feature, you have the capability to adjust the displayMember property to encompass both the codigo and nombre attributes for dual filtering functionality. To achieve this, establish a new property within your component that combines the codigo and nombre attributes.

Integrate the codigo and nombre attributes into a newly created property in your component:

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

Subsequently, adjust your HTML code so that the displayMember corresponds to the new displayName property:

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

The mat-select-filter will now filter based on both the codigo and nombre attributes simultaneously.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the correct way to effectively share data between components using a service?

I've been diving into learning Angular 2 and successfully implemented data sharing between sibling components using input/output functions. Check out my working example here. // Our root app component import {Component, NgModule} from '@angular ...

angular

Setting a background image in vanilla-extract/css is a straightforward process that can instantly enhance

I am brand new to using vanilla-extract/CSS and I have a rather straightforward question. I am attempting to apply a background image to the body of my HTML using vanilla-extract, but I am encountering issues as I keep getting a "failed to compile" error. ...

javascriptcsstypescriptvanilla-extract

Having some issues with validating numbers in typescript

When implementing react hook form in my React app, I encountered an issue while validating specific fields and had to add some conditions to the schema. yup .object({ test1: yup.number().when('test2', (test2: number, schema: yup.NumberSchem ...

reactjstypescriptreact-hook-formyup

The npm start command is no longer functioning in Angular 5

When attempting to start angular 5 with npm, I encountered an error that reads: TypeError: callbacks[i] is not a function Can anyone shed some light on where this error might be coming from? It seemed to pop up out of the blue and I can't seem to ...

javascriptangularnpmangular5

Enhancing Angular ngbDatepicker functionality by incorporating context into the markDisabled feature

In my code, I have defined an input field with ngbDatepicker. To disable certain days, I am using [markDisabled]="getDisabledDays" as shown below: <input type="text" [minDate]="getMinDate()" [maxDate]="maxDate" formControlName="deliverydate" #d= ...

angularngb-datepicker

How can I prevent the enter key from working with Twitter Typeahead?

Is there a way to prevent the enter key from being pressed on an element within Twitter Typeahead's dropdown feature while using Angular with Typescript? I attempted to utilize preventDefault() when event.keycode === 13 on the ng-keydown event for th ...

angularjsangulartypescriptangularjs-directivetwitter-typeahead

I can't seem to catch my Zod error, even though 'express-async-errors' is already installed. What could be causing this issue?

I've been working on developing an API, but I'm facing issues with setting up a global error controller using Zod. It seems that the global error handler is not being called even though I'm using express-async-errors. Below is my error mana ...

node.jstypescriptexpresstypeorm

Error Handler: Unable to retrieve the error object when utilized with a promise

I'm currently working on an angular application with a custom error handler implementation. One interesting point to note is that when you have a custom error handler and use an observable with http without catching errors using a catch block, like i ...

angularangular5

Angular project running Karma/Jasmine tests encounters failures when run on GitHub Action using Google Chrome on Ubuntu operating system

While working on my Angular project, I encountered an issue when trying to test it using Google Chrome with Karma & Jasmine in a GitHub Action. Google Chrome starts with multiple errors and eventually crashes after running some tests. Despite trying vario ...

angulargoogle-chrometestingkarma-jasminegithub-actions

When using npm to install Angular Bootstrap, the versions that are installed do not always match the specific versions

Displayed below is the content of my package.json file. { "name": "MyProject", "private": true, "version": "0.0.0", "scripts": { "test": "karma start ClientApp/test/karma.conf.js" }, "devDependencies": { "@angular/animations": "5.0.2", "@angular/common": ...

angulartwitter-bootstrapnpmpackage.jsonangular-bootstrap

An error occurred while trying to add a property to an array because the object is not extensible: TypeError -

In my code, there is an object named curNode with the following structure: { "name": "CAMPAIGN", "attributes": {}, "children": [] } I am attempting to add a new node to the object like this: curNode!.children!.push({ name: newNodeName, ...

javascripttypescript

A data type labeled as 'undefined' needs to include a method called '[Symbol.iterator]()' which will then return an iterator

I've been working on converting my reducer from JavaScript to TypeScript, but I keep encountering a strange error that I can't seem to resolve. The issue arises when I attempt to use ellipsis for array deconstruction in the reducer [...state.mess ...

reactjstypescriptreact-redux

The expansion feature of PrimeNG Turbotable

I'm currently facing an issue with the Primeng Turbotable where I am unable to expand all rows by default. You can find a code example of my problem at this link. I have already tried implementing the solution provided in this example, but unfortuna ...

angularhtmltypescriptprimengprimeng-turbotable

Exploring the potential of AssemblyScript in creating immersive WebXR

I have been exploring three.js and webXR for some time now, and I wanted to incorporate it into assembly script. While I know how to make webXR work in TypeScript, I encounter an error when trying to use it in assembly script with the import statement. Her ...

node.jstypescriptwebxrassemblyscript

Scrolling horizontally in Ionic framework

In regards to the response found on Ionic - Horizontal scroll tab for Categories, I have a question. I am curious about what needs to be included in the category.model. Can anyone provide some guidance? ...

angulartypescriptionic-framework

What is the best way to dynamically link an Angular Material table with information pulled from the backend server

I am attempting to connect a mat-table with data from the backend API following this Angular Material Table Dynamic Columns without model. Below is the relevant content from the .ts file: technologyList = []; listTechnology = function () { ...

javascripthtmlangularangular-material

Ways to retrieve the property of an object within a view while being sourced from an observable

I am currently working with the following provider code: getWorldCities2() { return this.http.get('../assets/city.list.json') .map(res => res.json()); } Within my TypeScript code, I have implemented the following: ionViewDidLoad() { ...

angulartypescriptionic2observable

Building a user interface in Angular2 that consists of multiple components and utilizes

What is the recommended structure for an Angular2 (beta3) application with routing when incorporating a parent/child multi-component setup? When dealing with individual tables, I have set up the following structure: https://i.stack.imgur.com/BYqGU.jpg I ...

angular

Issues with Angular routing after upgrading to Angular 4

After making updates in this way, they can be found here To update on Linux/Mac: run the command npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest type ...

angularplatform-server

"Unraveling the layers: Mastering nested API calls in

Is there a more efficient method to accomplish this task of retrieving all users along with their photos: this.authHttp.get(this.ApiUrl+'users') .map(res => res.json()) .subscribe(users => { for (let user of users) { ...

angularionic-frameworkrxjs