I am working on a feature where I have five rows with two checkboxes each generated using a loop and property binding. Currently, clicking on one checkbox selects all elements in the column. However, I want to achieve selection row-wise. Is there a method to achieve this?
my component.ts
import { Component, OnInit } from '@angular/core';
enum CheckBoxType { APPLY_FOR_JOB, MODIFY_A_JOB, NONE };
@Component({
selector: 'app-select-fav',
templateUrl: './select-fav.component.html',
styleUrls: ['./select-fav.component.css']
})
export class SelectFavComponent implements OnInit {
public fruits = ["apple", "straw berry","orange","plum","grapes"]
check_box_type = CheckBoxType;
currentlyChecked: CheckBoxType;
selectCheckBox(targetType: CheckBoxType) {
// If the checkbox was already checked, clear the currentlyChecked variable
if(this.currentlyChecked === targetType) {
this.currentlyChecked = CheckBoxType.NONE;
return;
}
this.currentlyChecked = targetType;
}
}
my component.html
<button>Like All</button>
<div *ngFor="let item of fruits; let i = index">
<p>{{item}}</p>
Like: <input type="checkbox" name="test"
[checked]="currentlyChecked === check_box_type.APPLY_FOR_JOB"
(click)="selectCheckBox(check_box_type.APPLY_FOR_JOB)">
Dislike : <input type="checkbox" name="test"
[checked]="currentlyChecked === check_box_type.MODIFY_A_JOB"
(click)="selectCheckBox(check_box_type.MODIFY_A_JOB)">
<hr>
</div>
PS: Clicking on the button should check all the like checkboxes in each respective row.