Currently, I am utilizing Angular and endeavoring to create reusable actions such as bulk updates, deletes, and deactivations.
I have incorporated all of these actions into another component and aim to use it as a generic method.
This implies that I have two components: the parent component and the child component.
Parent Component:
In the parent component, I have implemented a table where each row contains a checkbox. A method is used with the checkbox.
rowDataCheck(event, rowData) {
if (event.target.checked) {
this.groupList.push(rowData);
} else {
this.groupList = this.groupList.filter(item => item.id !== rowData.id);
}
}
The selected values are stored in grouplist[]. Upon page load (ngOnInit), groupList=[].
1. when ngOnInit() loads = this.grouplist=[];
2. when I check 1st row = this.grouplist=[1];
3. when I check 2nd row = this.grouplist=[1,2];
4. Unchecking and checking changes the groupList value(as per conditions above)
Child Component:
Following checkbox selection, I intend to pass the groupList value to the child component.
Issue:
To transfer values from the parent to the child, I utilized the @Input method. However, the child component only functions upon page load. I require passing the value from parent to child each time a checkbox is selected.
Kindly review this stackblitz