Add multiple checkboxes based on input length in Angular - html

Question

Currently, I have a single checkbox in my Angular application which I plot using the HTML code:
<input type="checkbox" id="box1" value="Apple">
<label for="box1"> Apple</label>
However, I now need to tweak the functionality such that the number of checkboxes is dependant on the array input. Also, the contents of the arrays should be the labels for the checkboxes.
For ex:
If my array is arr = ['Apple', 'Mango','Banana'], I should get 3 checkboxes (as the length of arr is 3) like this:
How can I do this?

Answer 1

use *ngFor for acheiving this
app.component.html
<div *ngFor="let item of arr;">
<input type="checkbox" id="{{item}}" [value]="item " (change)="getItem($event)">
<label for="{{item}}"> {{item }}</label>
</div>
app.component.ts
arr = ['Apple', 'Mango','Banana'];
getItem(item) {
//check if the checkbox selected or not
if(item.target.checked) {
let value = item.target.value;
console.log(value);
//Do your thing here
}
}
Hope this help's :)

Answer 2

There is multiple way to achieve this.
HTML
<div *ngFor="let item of array; let i = index">
<input type="checkbox" [checked]="item.status" (click)="checked(i)">
<label> {{item.name}}</label>
</div>
<div *ngFor="let item of arr;">
<input type="checkbox" id="{{item}}" [value]="item ">
<label for="{{item}}"> {{item }}</label>
</div>
Class
array = [
{ name: "Apple", status: true },
{ name: "Mango", status: true },
{ name: "Banana", status: true }
];
checked(i) {
this.array[i].status = !this.array[i].status;
}
arr = ["Apple", "Mango", "Banana"];
You can also find working link: stackblitz