My goal is to create a cascading filter that retrieves data from an API. Each time a user selects an item from the Transaction Type Dropdown, it triggers the getTransactionSubType function. The selected item in the Transaction Type Dropdown becomes the
this.payloadFilter.transactionTypegetTransactionSubType and display it in the Transaction Sub Type.
I'm not entirely confident in the current implementation as I've noticed some delays in retrieving the transaction sub-type data when changing or selecting items in the transaction type. Is there a better way to approach this problem?
Any help or suggestions would be greatly appreciated. Thank you.
https://i.sstatic.net/g7uzD.png
https://i.sstatic.net/to7Rq.png
#html code
<div class="report-filter-container">
<div class="report-select-container">
<mat-form-field appearance="fill" class="full-width">
<mat-label>Transaction Type</mat-label>
<mat-select
multiple
#selectElemTransactionTypes
[(value)]="reportFilter.transactionType"
(selectionChange)="changeFilter('transactionType',selectAllTransactionTypes)"> `
<div class="idle-report-select-all-container">
<mat-checkbox
#selectAllTransactionTypes
color="primary"
(click)="toggleAllSelectionFilter('transactionType',selectElemTransactionTypes, selectAllTransactionTypes)">
Select All
</mat-checkbox>
</div>
<mat-option *ngFor="let f of filters.transactionType" [value]="f.name">
{{f.name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="report-select-container">
<mat-form-field appearance="fill" class="full-width">
<mat-label>Transaction Sub Type</mat-label>
<mat-select
multiple
#selectElemTransactionSubTypes
[(value)]="reportFilter.transactionSubType"
(selectionChange)="changeFilter('transactionSubType',selectAllTransactionSubTypes)"> `
<div class="idle-report-select-all-container">
<mat-checkbox
#selectAllTransactionSubTypes
color="primary"
(click)="toggleAllSelectionFilter('transactionSubType',selectElemTransactionSubTypes, selectAllTransactionSubTypes)">
Select All
</mat-checkbox>
</div>
<mat-option *ngFor="let f of filters.transactionSubType" [value]="f">
{{f}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
Hi, I am trying to implement a cascading filter whose data comes from an API. So every time a user selects from the
#Ts code
ngOnInit(): void {
this.getTransactionType();
this.getTransactionSubType();
}
toggleAllSelectionFilter(selectProp: string, selectElem:MatSelect, selectAll: MatCheckbox) {
let isSelectAllSelected = this.isAllSelected[selectProp];
const checkSelAllOption = !isSelectAllSelected;
selectElem.options.forEach((item: MatOption) => (checkSelAllOption)? item.select(): item.deselect());
this.isAllSelected[selectProp] = checkSelAllOption;
setTimeout(()=>{
selectAll.checked = checkSelAllOption;
},0)
}
changeFilter(filterName:string, selectAll: MatCheckbox){
this.isAllSelected[filterName] = (this.reportFilter[filterName].length === this.filters[filterName].length);
this.payloadFilter[filterName] = JSON.stringify(this.reportFilter[filterName]);
selectAll.checked = this.isAllSelected[filterName];
if(filterName === 'transactionType') {
this.getTransactionSubType();
}
}
getTransactionSubType(){
let payloadFiltertransactionType = JSON.parse(this.payloadFilter.transactionType);
this._transSubTypeService.getTransactionSubtype(this.accountName,payloadFiltertransactionType)
.subscribe(
res =>{
if (res.isSuccess) {
this.filters.transactionSubType = res.data;
}
},
err => {
this.dialog.closeAll();
this._notificationService.showError('Encountered an error. Please try again.');
}
)
}