Filter data in Angular when click button

Question

I'm Working with Angular 10 and Angular Material. I have a mat-table where I display some data, my array where I took that data is:

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'},
];

On the top, I have some buttons to filter the data, I know how to filter it with the 'type' value (the last one) but I have some troubles to show the filtered data when I click the buttons.

Those are my buttons that filter the rows that contains the specific data.

Does anyone know how to do this filter?

PS. If you need more information please let me know!

Thanks!

can you try to host this on code sandbox so we can re create your problem ? — Dolev Dublon
– Dolev Dublon, Commented Nov 26, 2020 at 9:07
Hi! Sorry for the late. Here is the code: codesandbox.io/live/y0vl61g — Carlos Aldair Guevara
– Carlos Aldair Guevara, Commented Dec 1, 2020 at 7:24

Abdelali EL BAHLOUL · Accepted Answer · 2020-11-26 10:00:46Z

2

it's already answered click here

code :

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;
};

edited Nov 26, 2020 at 10:00

answered Nov 26, 2020 at 9:41

Abdelali EL BAHLOUL

211 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Filter data in Angular when click button

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related