Angular5 Material Data table filtering not working

Question

I have a material Data-table called in my component where the data is being called from an API which is defined in a service and called in the component which is working fine but when I apply the Data-table with Filtering which is provided at the material.io is not working as expected for whatever reason I don't know the filter part doesn't work?

Can anyone please help?

There are no errors or anything unusual I have tried various ways of shuffling the code and searching for this problem still nothing found.

Here is my code of component TS :

 import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { ViewAgentInformationDetailComponent } from '../view-agent-information-detail/view-agent-information-detail.component'
import { MatTableDataSource, MatPaginator, MatDialog } from '@angular/material';
import { protractor } from 'protractor/built/ptor';
import { Router, ActivatedRoute } from '@angular/router';
import { Element } from '../userinfo';
import { InfoService } from '../info.service';
import { MatPaginatorModule } from '@angular/material/paginator';

@Component({
  selector: 'app-view-agent-information',
  templateUrl: './view-agent-information.component.html',
  styleUrls: ['./view-agent-information.component.scss']
})
export class ViewAgentInformationComponent implements OnInit {

  dataSource;
  data: Element[];
  constructor(private router: Router, public Info: InfoService) { }

  displayedColumns = ['ViewOpt', 'CustID', 'PremiseID', 'Status', 'Market'];

  ngOnInit() {
    this.Info.getCustomers().subscribe(data => {
      this.dataSource = data
      console.log("Data Source: ");
      console.log(this.dataSource);
    })
  }

  applyFilter(filterValue: string) {
    this.data = this.dataSource;
    console.log(this.data);
    filterValue = filterValue.trim();
    filterValue = filterValue.toLowerCase();
    this.dataSource.filter = filterValue;
  }

  onSelect(element) {
    this.Info.changeData(element);
    this.router.navigate(['/dashboard/viewinfo', element.cust_id])
  }
}

Here you can see what is happening the screenshot

Can you add html as well?

Anshuman Jaiswal
– Anshuman Jaiswal

2018-03-28 10:41:21 +00:00
Commented Mar 28, 2018 at 10:41 — Anshuman Jaiswal
– Anshuman Jaiswal, Commented Mar 28, 2018 at 10:41
did you find a solution!?

Fraga
– Fraga

2019-05-03 17:48:00 +00:00
Commented May 3, 2019 at 17:48 — Fraga
– Fraga, Commented May 3, 2019 at 17:48

Anshuman Jaiswal · Accepted Answer · 2018-03-28 10:51:43Z

4

I guess the problem is with your datasource, except this it seems fine.

ngOnInit() {
    this.Info.getCustomers().subscribe(data => {
        this.dataSource = new MatTableDataSource(data);
        // rather than this.dataSource = data;
        console.log("Data Source: ");
        console.log(this.dataSource);
    })
}

And in HTML you should use datasource like this:

<mat-table [dataSource]="dataSource">

edited Mar 28, 2018 at 10:51

answered Mar 28, 2018 at 10:46

Anshuman Jaiswal

5,4621 gold badge31 silver badges46 bronze badges

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

Comments

bugs · Accepted Answer · 2018-03-28 10:52:34Z

3

To add to Anshuman's answer, you might also need to override the filterPredicate of your dataSource. This allows you to customise your filtering system. Let's say you want the ability to filter by Premise ID:

ngOnInit() {
    this.Info.getCustomers().subscribe(data => {
      this.dataSource = new MatTableDataSource(data);
    });
    // Define filter function to look for 'premiseId'matches
    this.dataSource.filterPredicate = function(data, filter): boolean {
      return data.premiseId.toLowerCase().includes(filter);
    };
  }

answered Mar 28, 2018 at 10:52

bugs

15.4k6 gold badges53 silver badges55 bronze badges

Comments

Natalia Arroyo · Accepted Answer · 2019-07-18 10:55:52Z

try this:

import { ViewAgentInformationDetailComponent } from '../view-agent-information-detail/view-agent-information-detail.component'
import { MatTableDataSource, MatPaginator, MatDialog } from '@angular/material';
import { protractor } from 'protractor/built/ptor';
import { Router, ActivatedRoute } from '@angular/router';
import { Element } from '../userinfo';
import { InfoService } from '../info.service';
import { MatPaginatorModule } from '@angular/material/paginator';

@Component({
 selector: 'app-view-agent-information',
 templateUrl: './view-agent-information.component.html',
 styleUrls: ['./view-agent-information.component.scss']
})
export class ViewAgentInformationComponent implements OnInit {

 dayaSource : MatTableDataSource<Element>;
 data: Element[];
 constructor(private router: Router, public Info: InfoService) { }

 displayedColumns = ['ViewOpt', 'CustID', 'PremiseID', 'Status', 'Market'];

 ngOnInit() {
   this.Info.getCustomers().subscribe(data => {
     this.dataSource = data
     console.log("Data Source: ");
     console.log(this.dataSource);
   })
 }

 applyFilter(filterValue: string) {
   this.dataSource.filter = filterValue.trim().toLowerCase();
 }

 onSelect(element) {
   this.Info.changeData(element);
   this.router.navigate(['/dashboard/viewinfo', element.cust_id])
 }
}

Collectives™ on Stack Overflow

Angular5 Material Data table filtering not working

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related