Multicheckbox not being clickable(not getting checked at all)

Question

I wanted to render multiple checkbox in a grid cell. I tried with formly multicheckbox. But with that, the checkboxes were not even rendering. So I tried to do it in this way, but in this way it's not being checked at all. Right now, I don't want any event to be done on checkbox, I just want it to checkec unchecked by user. to.labels is coming from another service. In .ts file, I am having :

public ngOnInit{
console.log(this.to.labels) }

Can someone please help?

<div class="inline-div" *ngFor="let item of to.labels | keyvalue; let idx=index">
<input type="checkbox" id="custom-multicheckbox">
<label class="form-check-label" for="custom-multicheckbox">{{item.value.value}}</label>
</div>

to.labels is like an array

0: { id:1, label:'P'}
1: {id:2, label:'R'}

I think the problem is the checkboxes are on a grid, so the grid cell is getting active and not the checkbox. Please suggest how to activate checkbox in a grid cell.

Answer 1

why you are using item.value.value? instead of item.value

you could try this way:

<div class="inline-div" *ngFor="let item of to.labels | keyvalue; let idx=index">
   <input type="checkbox" />
   <label
     class="form-check-label"
     value="item.value"
   ></label>
 </div>