I'm attempting to initialize a default value as checked for a checkbox within my ngFor loop. Here is an array of checkbox items I am working with:
tags = [{
name: 'Empathetic',
checked: false
}, {
name: 'Smart money',
checked: true
}, {
name: 'Minimal help after writing check',
checked: false
}, {
name: 'Easy term sheet',
checked: true
}];
This is the HTML structure I am using:
<div class="form-group">
<div class="form-check" *ngFor="let tag of tags;">
<label class="form-check-label" for="tag{{tag.value}}">
<input
class="form-check-input"
type="checkbox"
id="tag{{tag.value}}"
name="tagOptions"
[(ngModel)]="tag.checked">
{{tag.name}}
</label>
</div>
</div>
The expected outcome is to have 2 checkboxes checked and 2 unchecked, but currently all are unchecked. I have experimented with different methods such as [checked]="tag.checked", however, it does not seem to be working as intended.