Regarding the use of SelectionModel for mat-checkbox, a function is called on each click:
toggleSelection(row) {
this.selection.toggle(row);
console.log("Selection");
console.log("this", this.selection.selected);
this.selection.selected.forEach(selected => {
this.masterPossibleActions = this.masterPossibleActions.filter(action => selected.possibleActions == action);
});
console.log(":MAster",this.masterPossibleActions)
}
The array returned by this.selection.selected represents the selected rows and contains objects with a property called possibleActions. The goal is to have the masterPossibleActions Array contain the list of possible actions that are common between all selected rows.
Definition of PossibleAction object class:
class ActionObject {
key: string;
value: string;
constructor(key: string, value: string) {
this.key = key;
this.value = value;
}
}
The toggle function:
<td mat-cell *matCellDef="let row">
<mat-checkbox appClickStopPropagation (change)="toggleSelection(row)" class="custom-checkbox"
[checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
</mat-checkbox>
</td>
This.selection is defined as:
selection = new SelectionModel<Enrolment>(true, []);
Definition of Enrolment object:
export class Enrolment {
id: string;
user: any;
enrollable: any;
time_created: string;
status: string;
possibleActions: Array<ActionObject> = [];
preparePossibleActions() {
this.possibleActions = [];
this.possibleActions.push(new ActionObject("DELETE", "Delete"));
switch (this.status) {
case "PENDING":
this.possibleActions.push(new ActionObject("REMOVE", "Reject"));
this.possibleActions.push(new ActionObject("APPROVE", "Approve"));
break;
case "REJECTED":
case "CANCELLED":
case "WITHDRAWN":
break;
case "APPROVED":
case "WITHDRAW_PENDING":
case "COMPLETED":
this.possibleActions.push(new ActionObject("REMOVE", "Withdraw"));
break;
default:
break;
}
}
constructor(rawObj: any) {
this.id = rawObj.id;
this.user = rawObj.user;
this.enrollable = rawObj.enrollable;
this.time_created = rawObj.time_created;
this.status = rawObj.status;
this.preparePossibleActions();
}
}