CODEWITHSUNDEEP
angularangular-material
Pablo Aguirre de Souza
Pablo Aguirre de Souza

Reputation: 4149

Hiding rows based on value in material table

I'd like to know if there's a way to permanently hide rows based on value in Angular Material. Let's say I never want to show results when the value of name is "test". I was looking at using the .filterpredicate method but not sure if it's the best approach? Any help will is appreciated

import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { MatSort } from '@angular/material/sort';
import { BudgetService } from '../budget.service';
import { Record } from '../record.model';
import { MatPaginator } from '@angular/material/paginator';

@Component({
  selector: 'app-budget-list',
  templateUrl: './budget-list.component.html',
  styleUrls: ['./budget-list.component.css']
})
export class BudgetListComponent implements OnInit, AfterViewInit {
  displayedColumns = ['id', 'date', 'name', 'value', 'category', 'type', 'button']
  dataSource = this.service.dataSource;

  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(public service: BudgetService) { }

  ngOnInit() {
    this.getAllReports();
  }

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  }

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

Upvotes: 0

Views: 375

Answers (2)

Mahmoudi MohamedAmine
Mahmoudi MohamedAmine

Reputation: 250

use this function :

applyFilter(event: Event) {
      const filterValue = (event.target as HTMLInputElement).value;
      this.dataSource.filter = filterValue.trim().toLowerCase();
    }

Upvotes: 1

Tina
Tina

Reputation: 534

Try This:

import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
    import { MatSort } from '@angular/material/sort';
    import { BudgetService } from '../budget.service';
    import { Record } from '../record.model';
    import { MatPaginator } from '@angular/material/paginator';
    
    @Component({
      selector: 'app-budget-list',
      templateUrl: './budget-list.component.html',
      styleUrls: ['./budget-list.component.css']
    })
    export class BudgetListComponent implements OnInit, AfterViewInit {
      displayedColumns = ['id', 'date', 'name', 'value', 'category', 'type', 'button']
      dataSource = this.service.dataSource;
    
      @ViewChild(MatSort) sort: MatSort;
      @ViewChild(MatPaginator) paginator: MatPaginator;
    
      constructor(public service: BudgetService) { }
    
      ngOnInit() {
        this.getAllReports();
         this.doFilter(filterValue);
      }
    
      ngAfterViewInit() {
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
      }
    
      doFilter(filterValue: string) {
        this.dataSource.filter((data) => data.name!== filterValue);
      }

Upvotes: 1

Related Questions