Implement a data filtering functionality in Angular upon clicking a button

I'm currently working with Angular 10 and Angular Material. Within my mat-table, I am displaying data from an array called ELEMENT_DATA. This array includes various properties for each item such as invoice number, category, description, start date, status, department, floor, unit, classification, subcategory, and type.

const ELEMENT_DATA: PeriodicElement[] = [
  {invoice: 1, category: 'Hydrogen', description: 'Hello World!.', startDate: 'H', status: '1', see: '', department: 'Bugambilias', floor: 1, unit: 603, classification: 'Mantenimiento', subcategory: 'Seguridad', type: '1'},
  {invoice: 2, category: 'Helium', description: 'Hello World!.', startDate: 'He', status: '1', see: '', department: 'Bugambilias', floor: 2, unit: 603, classification: 'Mantenimiento', subcategory: 'Seguridad', type: '2'},
  {invoice: 3, category: 'Lithium', description: 'Hello World!.', startDate: 'Li', status: '1', see: '', department: 'Bugambilias', floor: 3, unit: 603, classification: 'Mantenimiento', subcategory: 'Seguridad', type: '1'},
  {invoice: 4, category: 'Beryllium', description: 'Hello World!.', startDate: 'Be', status: '1', see: '', department: 'Bugambilias', floor: 4, unit: 603, classification: 'Mantenimiento', subcategory: 'Seguridad', type: '1'},
  {invoice: 5, category: 'Boron', description: 'Hello World!.', startDate: 'B', status: '1', see: '', department: 'Bugambilias', floor: 5, unit: 603, classification: 'Mantenimiento', subcategory: 'Seguridad', type: '1'},
  {invoice: 6, category: 'Carbon', description: 'Hello World!.', startDate: 'C', status: '1', see: '', department: 'Bugambilias', floor: 6, unit: 603, classification: 'Mantenimiento', subcategory: 'Seguridad', type: '2'},
  {invoice: 7, category: 'Nitrogen', description: 'Hello World!.', startDate: 'N', status: '1', see: '', department: 'Bugambilias', floor: 7, unit: 603, classification: 'Mantenimiento', subcategory: 'Seguridad', type: '2'},
  {invoice: 8, category: 'Oxygen', description: 'Hello World!.', startDate: 'O', status: '1', see: '', department: 'Bugambilias', floor: 8, unit: 603, classification: 'Mantenimiento', subcategory: 'Seguridad', type: '2'},
  {invoice: 9, category: 'Fluorine', description: 'Hello World!.', startDate: 'F', status: '1', see: '', department: 'Bugambilias', floor: 9, unit: 603, classification: 'Mantenimiento', subcategory: 'Seguridad', type: '2'},
  {invoice: 10, category: 'Neon', description: 'Hello World!.', startDate: 'Ne', status: '1', see: '', department: 'Bugambilias', floor: 10, unit: 603, classification: 'Mantenimiento', subcategory: 'Seguridad', type: '1'},
];

https://i.sstatic.net/7LpqA.png

At the top of the table, there are buttons that enable data filtering based on the 'type' value. While I have successfully filtered the data, I am facing challenges in displaying the filtered results when the buttons are clicked.

https://i.sstatic.net/4VDjg.png

These buttons are designed to filter the rows containing specific data.

If anyone has a solution for displaying the filtered data upon button click, please share!

PS. Feel free to request more information if needed!

Thank you!

angulartypescriptangular-material

Answer №1

This question has already been addressed. For the answer, please visit this link

Here is the code snippet:

this.dataSource = new MatTableDataSource(ELEMENT_DATA);
this.dataSource.sort = this.sort;
this.dataSource.filterPredicate = function(data: any, filterValue: string) {
  return data.specificColumn /** replace this with the column name you want to filter */
    .trim()
    .toLocaleLowerCase().indexOf(filterValue.trim().toLocaleLowerCase()) >= 0;
};

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

Troubleshooting a Custom Pipe Problem in Angular Material Drag and Drop

Currently, I am working on a project involving Angular Material Drag And Drop functionality. I have created a simplified example on StackBlitz which you can access through this link: here The project involves two lists - one containing pets and the other ...

javascriptangulartypescriptangular-material

"Utilize React and Redux to fetch data from the server after making changes with an API

I am currently using a combination of react, redux, and typescript in my project. My goal is to add an item from the react component by making an API call and then displaying whether the operation was successful or not. To achieve this, I am fetching data ...

reactjstypescriptreduxredux-thunk

Tips for efficiently utilizing Hooks with React Context:

I am currently working on my application and utilizing React Context with the setState function. const userContext = React.createContext([{ user: {} }, () => {}]); const userHook = useState({ user: {} }); <userContext.Provider value={userHook}> / ...

reactjstypescriptreact-hookseslintreact-context

Utilizing TypeScript Class Inheritance: The Reference to 'super' is Only Allowed in Members of Derived Classes or Object Literal Expressions

We have encountered a scoping issue while using TypeScript classes with inheritance. It seems that TypeScript/JavaScript does not allow us to use 'super' within a promise structure or an enclosed function. The error message we are getting is: Ty ...

javascriptjqueryinheritancetypescript

Is it possible to separate a portion of HTML into a template and reuse it in multiple locations within a webpage?

In my HTML, I have an issue with duplicate code. In Java, I typically use IntelliJ to mark the code and select "extract method" => "replace 2 occurrences". I am looking for a similar solution in HTML, but the current method seems messy: <ng-template ...

htmlangular

What is the process for adding an element using Angular Material2 design?

I am in the process of creating a template where, upon clicking a button, I want to append specific elements. While I have successfully appended the elements using the code below, I am facing challenges with adding styles and integrating angular-material2 ...

angularangular-material2

Revamp the appearance of angular material inputs

I have been working on customizing the style of an Angular Material input. So far, I successfully altered the background-color with the following code: md-input-container { padding-bottom: 5px; background-color: #222; } I also changed the placeh ...

javascripthtmlcssangularjsangular-material

Guide on accessing a modal component in Angular?

I have an Edit Button on my component called SearchComponent. When the user clicks this button, it currently redirects them to another component named EditFormComponent using navigateByUrl('url-link'). However, I would like to enhance the user ex ...

angulartypescriptformsangular-materialmodal-dialog

Centered title in side menu for Ionic 3

I recently utilized the Ionic CLI to create an Ionic project. The version I am working with is Ionic 3. Currently, I am facing a challenge in centering the title image. Any assistance on this matter would be greatly appreciated. <ion-menu [content]=" ...

cssangularionic-frameworkionic3

Prevent selection of future dates in Kendo UI Calendar Widget

Can someone please advise on a method to disable future dates (i.e., gray them out) in the Kendo UI Calendar widget? I've attempted hiding the future dates, but it doesn't look good. I've also tried different ways to gray them out without su ...

angulartypescriptkendo-ui

Unraveling TypeScript code expressions

I am seeking clarification on the meaning and practical application of this particular expression. ((identifier:string) => myFunction(identifier))('Hi') myFunction const myFunction = (str:string) => { console.log(str) } The output displ ...

javascripttypescriptpolymer

The system is unable to process the property 'items' due to a null value

When trying to access the properties of ShoppingCart, an error is encountered stating that Property item does not exist on type {}. The mistake made in the code is unclear and difficult to identify. shopping-cart.ts import { ShoppingCartItem } from &apos ...

angulartypescript

Tips for preventing a promise from being executed more than once within an observable while being subscribed to a BehaviorSubject

I've defined a class called Store with the following structure: import { BehaviorSubject, Observable } from 'rxjs' export abstract class Store<T> { private state: BehaviorSubject<T> = new BehaviorSubject((undefined as unknown ...

javascriptangulartypescriptrxjs

Creating TypeScript Unions dependent on a nested object's property

I want to create a Union Type that is dependent on a nested property within my object. Take a look at the example provided below: type Foo = { abilities: { canManage: boolean } } type Bar = { abilities: { canManage: boolean ...

typescripttypescript-typingsreact-typescript

execute the NPM script in the current directory

Within my package.json file for a node project, I have the following test script that utilizes the ts-node package: "scripts": { "build": "tsc", "test": "ts-node" } Executing this script from the root ...

javascriptnode.jstypescriptnpm

Obtaining an instance of the CKEditor Editor in TypeScript with CKEditor 4: what's the best way?

Can someone explain how to utilize the CKEDITOR 4 plugin in TypeScript for an Angular 9 application? I am looking to set the configuration through TypeScript (specifically for autogrow) and also implement an INSERT HTML function. I have already imported ...

angulartypescriptckeditoreditorinstance

The test window displays the Angular test component

During my test runs, I have noticed a strange occurrence. Components are appearing in the DOM near where the tests are being conducted. What's even more peculiar is that only one component is visible at a time. This phenomenon seems to occur with ever ...

angularunit-testingkarma-runner

Avoid using the <app-componentName> tag when displaying content in an Angular application

Is there a way to exclude the <app-componentName> tag from being generated in Angular HTML output? Let me illustrate what I mean using an example: Imagine I have a chat-box with a message component structured like this: <div class="chatbox&q ...

angularangular-components

Printing problems with Angular POS software

Looking for a way to bypass print preview in Angular 6. I came across this interesting solution: Angular 2 Raw Printing Service Currently utilizing this link for printing in Angular POS. Are there any other options available? .ts code printInvoice() ...

angularrsvp.jsrsvp-promise

Issue encountered when attempting to run "ng test" in Angular (TypeScript) | Karma/Jasmine reports an AssertionError stating that Compilation cannot be undefined

My development setup includes Angular with TypeScript. Angular version: 15.1.0 Node version: 19.7.0 npm version: 9.5.1 However, I encountered an issue while running ng test: The error message displayed was as follows: ⠙ Generating browser application ...

node.jsangulartypescripttestingjasmine