I have a table populated with data that I want to filter using checkboxes.
Below is the HTML code for this 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> Payment Date </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> Status Description </mat-header-cell>
<mat-cell *matCellDef="let payment" [ngClass]="{'red-color' : payment.StatusDescription == 'Pending' || payment.StatusDescription == '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 generated sample data to display in the table.
The following is the component code responsible for passing data to the table. Filtering operations based on checkbox selection need to be implemented. For instance, selecting the "rejected" checkbox should only show rows where
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;
}
}
Here is the mock data used:
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'
}
];
Please provide guidance on implementing correct filtering functionality based on the selected checkboxes.
Your assistance is greatly appreciated.