Fiter table with checkbox Angular

Question

I have a table with data, that I need to filter with checkboxes.

Here is my html for the component:

   <div><mat-checkbox  [(ngModel)]="pending">Pending</mat-checkbox></div>
   <div><mat-checkbox  [(ngModel)]="approved">Approved</mat-checkbox></div>
   <div><mat-checkbox  [(ngModel)]="rejected">Rejected</mat-checkbox></div>

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

  <ng-container matColumnDef="PaymentDate">
    <mat-header-cell *matHeaderCellDef> PaymentDate </mat-header-cell>
    <mat-cell *matCellDef="let payment"> {{payment.PaymentDate | date: 'dd/MM/yyyy HH:MM'}}  </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Amount">
    <mat-header-cell *matHeaderCellDef> Amount </mat-header-cell>
    <mat-cell *matCellDef="let payment"> {{payment.Amount}} {{payment.Currency}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="StatusDescription">
    <mat-header-cell *matHeaderCellDef> StatusDescription </mat-header-cell>
    <mat-cell *matCellDef="let payment"  [ngClass]="{'red-color' : payment.StatusDescription == 'Pending' || 'Rejected', 'green-color' : payment.StatusDescription == 'Approved'}"> {{payment.StatusDescription}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="Reason">
    <mat-header-cell *matHeaderCellDef> Reason </mat-header-cell>
    <mat-cell *matCellDef="let payment"> {{payment.Reason}} </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator [length]="5" [pageSize]="5" [pageSizeOptions]="[5, 10, 25]">
</mat-paginator>

I created code to show data from mock data.

Here is the component code where data is passed to the table. I need to filter it according to the checkboxes. For example if I click rejected checkboxes I need to see only rows with payment.StatusDescription == Rejected.

    import { Component, AfterViewInit, ViewChild } from '@angular/core';
import {MatTableDataSource, MatPaginator} from '@angular/material';
import { PAYMENTS } from "./payments-mock";


@Component({
  selector: 'app-payments',
  templateUrl: './payments.component.html',
  styleUrls: ['./payments.component.scss']
})
export class PaymentsComponent implements AfterViewInit {

  pending = false;
  approved = false;
  rejected = false;


  displayedColumns = ['PaymentDate','Amount','StatusDescription','Reason'];
  dataSource = new MatTableDataSource(PAYMENTS);


  @ViewChild(MatPaginator) paginator: MatPaginator;

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

}

And here is the mock data:

import { Payment } from "./payment";

export const PAYMENTS : Payment [] =  [
    {
    'Id': 832321,
    'AccountHolderId': '15651',
    'AccountHolderName': 'Alex Dumsky',
    'PaymentDate': new Date('2015-01-23T18:25:43.511Z'),
    'Amount': 445.12,
    'Currency': 'UAH',
    'Status': 0,
    'StatusDescription': 'Pending',
    'Reason': null
    },
    {
    'Id': 806532,
    'AccountHolderId': '46556',
    'AccountHolderName': 'Dudi Elias',
    'PaymentDate': new Date('2015-02-10T18:25:43.511Z'),
    'Amount': 4511.12,
    'Currency': 'EUR',
    'Status': 0,
    'StatusDescription': 'Pending',
    'Reason': null
    },
    {
    'Id': 7845431,
    'AccountHolderId': '48481',
    'AccountHolderName': 'Niv Cohen',
    'PaymentDate': new Date('2015-04-01T18:25:43.511Z'),
    'Amount': 10.99,
    'Currency': 'USD',
    'Status': 1,
    'StatusDescription': 'Approved',
    'Reason': 'Good Person'
    }
];

How I can do this correctly?

Thanks for helping.

jakubm · Accepted Answer · 2018-12-09 12:53:12Z

1

You can use events triggered after selecting checkbox. Here is a short example:

mycomponent.component.html

  <div><mat-checkbox  (ngModelChange)="pendingModelChecked($event) 
[ngModel]="pending" >Pending</mat-checkbox></div>

<div><mat-checkbox  (ngModelChange)="approvedModelChecked($event) 
   [ngModel]="approved" >Pending</mat-checkbox></div>

mycomponent.component.ts

   ngOnInit() {
    ...
    this.dataSource.filterPredicate =
     (data, filter: string) => !filter || data.StatusDescription === filter;
   }
   pendingModelChecked(value) {
     const filter = value ? 'Pending' : null
     this.dataSource.filter = filter;
   }

   approvedModelChecked(value) {
     const filter = value ? 'Approved' : null
     this.dataSource.filter = filter;
   }

answered Dec 9, 2018 at 12:53

jakubm

4224 silver badges11 bronze badges

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

1 Comment

Eugene Sukh Over a year ago

Yeah. It helps. Thanks.

Collectives™ on Stack Overflow

Fiter table with checkbox Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related