What is the best approach to dynamically iterate over checkboxes in Angular?

Question

What is the best approach to dynamically iterate over checkboxes in Angular?

I have a hardcoded checkbox that looks like this:

https://i.sstatic.net/UVVCM.png

The code snippet is as follows:

<h5>Document List</h5>
<div class="form-check">
   <label class="form-check-label" for="check1">
   <input type="checkbox" class="form-check-input" id="check1" name="proformaInvoice" value="something" [(ngModel)]="processAnexOne.proformaInvoice" value="checked" >Proforma Invoice
   </label>
</div>

The JSON data being received can be viewed here:

https://i.sstatic.net/ckeWq.png

To fetch the JSON data from an API, I use this method:

ngOnInit() {
         this.http.get('http://localhost:8080/api/documents')
      .subscribe((data: any[]) => {
        this.documents = data;
        console.log(this.documents);
      })
  }

Is there a way to dynamically bind this JSON data to the checkbox?

javascript angular typescript angular6

Answer 1

Answer №1

If you want to loop through the documents array in Angular, you can make use of the *ngFor directive. Remember to include a new property called selected inside each document object and bind it to the checkbox value.

<div class="form-check" *ngFor="let document of documents">
   <label class="form-check-label" for="check1">
   <input type="checkbox" class="form-check-input" 
        id="check1" name="proformaInvoice"
        [value]= "document.docName"
        [(ngModel)]="document.selected"
        >Proforma Invoice
   </label>
</div>

Answer 2

If you want to loop through the documents array in Angular, you can make use of the *ngFor directive. Remember to include a new property called selected inside each document object and bind it to the checkbox value.

<div class="form-check" *ngFor="let document of documents">
   <label class="form-check-label" for="check1">
   <input type="checkbox" class="form-check-input" 
        id="check1" name="proformaInvoice"
        [value]= "document.docName"
        [(ngModel)]="document.selected"
        >Proforma Invoice
   </label>
</div>

Answer 3

Answer №2

To ensure the data is already available in your HTML, utilize ngIf to check for its presence before displaying the div.

Within the nested div, implement ngFor loop on your documents array.

<h5>Document List</h5>
<div class="form-check" *ngIf="dataIsPresent">
  <div *ngFor="let document of documents">
   <label class="form-check-label" for="check1">
   <input type="checkbox" class="form-check-input" name="document.docName" value="something"  value="document.docName" >{{document.docName}}
   </label>
  </div>
</div>

In your TypeScript file, initialize a boolean variable to track the arrival status of data.

dataIsPresent: Boolean = false;
ngOnInit() {
         this.http.get('http://localhost:8080/api/documents')
      .subscribe((data: any[]) => {
        this.documents = data;
        this.dataIsPresent = true;
        console.log(this.documents);
      })
  }

If you have any further questions, feel free to ask.

Answer 4

To ensure the data is already available in your HTML, utilize ngIf to check for its presence before displaying the div.

Within the nested div, implement ngFor loop on your documents array.

<h5>Document List</h5>
<div class="form-check" *ngIf="dataIsPresent">
  <div *ngFor="let document of documents">
   <label class="form-check-label" for="check1">
   <input type="checkbox" class="form-check-input" name="document.docName" value="something"  value="document.docName" >{{document.docName}}
   </label>
  </div>
</div>

In your TypeScript file, initialize a boolean variable to track the arrival status of data.

dataIsPresent: Boolean = false;
ngOnInit() {
         this.http.get('http://localhost:8080/api/documents')
      .subscribe((data: any[]) => {
        this.documents = data;
        this.dataIsPresent = true;
        console.log(this.documents);
      })
  }

If you have any further questions, feel free to ask.

Answer 5

Answer №3

One way to efficiently iterate through documents and create checkboxes in Angular is by using the *ngFor directive.

<div *ngFor="let obj of documents">
    <div class="form-check">
       <label class="form-check-label" for="check1">
           <input type="checkbox" class="form-check-input" id="check1"
           name="proformaInvoice" value="something" 
           [(ngModel)]="obj.value" value="checked" >Proforma 
           Invoice
       </label>
    </div>
</div>

Answer 6

One way to efficiently iterate through documents and create checkboxes in Angular is by using the *ngFor directive.

<div *ngFor="let obj of documents">
    <div class="form-check">
       <label class="form-check-label" for="check1">
           <input type="checkbox" class="form-check-input" id="check1"
           name="proformaInvoice" value="something" 
           [(ngModel)]="obj.value" value="checked" >Proforma 
           Invoice
       </label>
    </div>
</div>

What is the best approach to dynamically iterate over checkboxes in Angular?

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing razor syntax within JavaScript

Creating a like button using AJAX in Django

Click on the dropdown menu to reveal a form, and simply click outside of it to make

To concatenate an array into a single line, you can use the JSON.stringify() method

Angular4 Error: Unable to link to 'ngClass' as it is not recognized as a property of 'input'

There is no output generated by Node.js express

Issues with the uib-datepicker-popup component in my Angular application are causing functionality to

Utilizing React/Redux to perform individual fetch calls for specific routes

Issues with arguments not being identified - Discord.js version 14

Transform unidentified individuals into authenticated users using Firebase Authentication for Google

What is the process for obtaining the final element in an array of objects when a particular character is present in the value of a key?

Adding a Row to an HTML Table Inside a Form through JavaScript

Assistance with Collision Detection in HTML5 Canvas using JavaScript

The output display is not visible

Steps to update the color of checkbox labels

How can I execute a synchronous MongoDB query in Node.js properly?

Utilizing useState() to manage active link state in Navigation bar component

Organize a JavaScript object into a hierarchical child-parent structure

Error: Unable to set reference. The initial argument includes an undefined value in the 'gender' property of 'Users.ji8A7TkSldfdvieDqGxko9eV3Jy1'

Ways to collect particular tokens for delivering targeted push notifications to designated devices