Tips for setting the checkbox and select box to be automatically checked based on specific column values in Angular 7

Question

Tips for setting the checkbox and select box to be automatically checked based on specific column values in Angular 7

My table is populated with values from a JSON file that contains various columns. Clicking the edit button opens a box where checkbox values are sourced from another JSON file (statusdata). The issue arises when the checkboxes need to be checked based on the status column value of the clicked row. To close the box, simply click on the close link. You can find the code below: https://stackblitz.com/edit/angular-zqswrw

app.component.html

<table class="table border">
    <thead>
        <tr>
            <ng-container *ngFor="let column of columns; let i = index">
                <th>{{ column }}</th>
            </ng-container>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of groups;let i = index">
            <td>{{row.name}}</td>
            <td>{{row.items}}</td>
            <td >
                <span class="status" *ngFor="let item of row.Status ;let j = index">
                    {{item.name}}
                   </span> <span  *ngIf = "i == hoverIndex" class="hover-details"></span>
           </td>
            <td style="cursor:pointer;" (click)="edit(row);">Edit</td>
        </tr>
  </tbody>
</table>
<div style="border: 1px solid #000;
    padding: 10px;
    display: flex;
    width: 100%;
    margin-top: 1%;" *ngIf="block">

Status-checkbox:<div style="float:left" *ngFor="let status of statusdata">
 <input type="checkbox" [checked]="" value="status.id" />{{status.name}}
</div>

<div (click)="close();" style="cursor:pointer;float:right;margin-left:10%;">close</div>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  dotsh:any;
    hoverIndex:number = -1;
    groups:any;
    test:any;
    statusdata:any;
    block:any;
    closeit:any;
  onHover(i:number){
 this.hoverIndex = i;
}
     columns = ["name", "Items","status","Action"];


  edit(dataItem){
    console.log(dataItem.status);
    this.block = true;  
  }
  ngOnInit() {
      this.closeit = true;
      this.block = false;
      this.test = false;
      this.groups=[{"id":1,"name":"pencils","items":"red pencil","Status":[{"id":1,"name":"green"},{"id":2,"name":"red"},{"id":3,"name":"yellow"}],"loc":[{"id":1,"name":"loc 1"},{"id":2,"name":"loc 2"},{"id":3,"name":"loc 3"}]},{"id":2,"name":"rubbers","items":"big rubber","Status":[{"id":1,"name":"green"},{"id":2,"name":"red"}],"loc":[{"id":1,"name":"loc 2"},{"id":2,"name":"loc 3"}]},{"id":3,"name":"rubbers1","items":"big rubber1","Status":[{"id":1,"name":"green"}],"loc":[{"id":1,"name":"loc 2"},{"id":2,"name":"loc 3"}]}];
      this.statusdata = [{"id":1,"name":"green"},{"id":2,"name":"red"},{"id":3,"name":"yellow"}];




} 
close(){
    this.block = false;
}
}

html css angular typescript

Answer 1

Answer №1

To effectively manage the checked state of checkboxes, consider adding a variable to your array that will store the checkbox status. The code snippet below demonstrates how you can implement this solution:

app.component.html

Status-checkbox:<div style="float:left" *ngFor="let status of statusdata">
 <input type="checkbox" [checked]="status.checked" value="status.id" />{{status.name}}
</div>

app.component.ts

  edit(dataItem){
      console.log(dataItem.status);
    this.block = true;  

    this.statusdata = this.statusdata.map((item)=>{
      item.checked= false;
        for(var d=0;d<dataItem.Status.length;d++){
          if(item.id==dataItem.Status[d].id){
            item.checked = true;
            break;
          }
        }
      return item;
    });
  }

Answer 2

To effectively manage the checked state of checkboxes, consider adding a variable to your array that will store the checkbox status. The code snippet below demonstrates how you can implement this solution:

app.component.html

Status-checkbox:<div style="float:left" *ngFor="let status of statusdata">
 <input type="checkbox" [checked]="status.checked" value="status.id" />{{status.name}}
</div>

app.component.ts

  edit(dataItem){
      console.log(dataItem.status);
    this.block = true;  

    this.statusdata = this.statusdata.map((item)=>{
      item.checked= false;
        for(var d=0;d<dataItem.Status.length;d++){
          if(item.id==dataItem.Status[d].id){
            item.checked = true;
            break;
          }
        }
      return item;
    });
  }

Answer 3

Answer №2

If you want to not only display whether something is checked but also be able to change it, you should use [(ngModel)] instead of [checked]. The code by Narayanan works well, but it can be made more straightforward.

Additionally, in order to track the changes, we need an auxiliary variable called "itemEdit". The edit and close functions can be simplified as follows:

itemEdit:any //<--declare an auxiliary variable to store the item being edited

edit(dataItem) {
    this.itemEdit = dataItem; //<--save a "reference" of the data we are editing 
    this.statusdata.forEach(x => {  //for each element in "statusdata"
      x.checked = dataItem.Status.find(data => data.id == x.id); //set the "checked" value
    });
    this.block = true;
}

close() {
    //our save "reference", the Status was
    this.itemEdit.Status = this.statusdata
      .filter(x => x.checked)  //get only the values of statusdata.checked
      .map((d: any) => {  //but only want object with id and name properties
        return { id: d.id, name: d.name };
      });
    this.block = false;
}

The .html file uses [(ngModel)]

Status-checkbox:
 <div style="float:left" *ngFor="let status of statusdata">
    <input type="checkbox" [(ngModel)]="status.checked" 
            value="status.id" />
    {{status.name}}
</div>

Your forked StackBlitz

Update: If we have a select input instead of checkboxes, the technique is similar.

You need a variable statusEdit and use [(ngModel)]

Status-checkbox:<div style="float:left">
        <select [(ngModel)]="statusEdit" >
   <option *ngFor="let status of statusdata"  [value]="status.id">{{status.name}}</option>
 </select>

The edit and close functions would then look like this (note that we are now modifying dataItem.Status[0] since Status is an array with one element):

  edit(dataItem) {
    this.itemEdit = dataItem;
    this.statusEdit = dataItem.Status[0].id;
    this.block = true;
}
close() {
    this.itemEdit.Status[0] = {
      ...this.statusdata.find(x => x.id == this.statusEdit)
    };
    this.block = false;
}

Once again, feel free to check out your updated link on StackBlitz

Answer 4

If you want to not only display whether something is checked but also be able to change it, you should use [(ngModel)] instead of [checked]. The code by Narayanan works well, but it can be made more straightforward.

Additionally, in order to track the changes, we need an auxiliary variable called "itemEdit". The edit and close functions can be simplified as follows:

itemEdit:any //<--declare an auxiliary variable to store the item being edited

edit(dataItem) {
    this.itemEdit = dataItem; //<--save a "reference" of the data we are editing 
    this.statusdata.forEach(x => {  //for each element in "statusdata"
      x.checked = dataItem.Status.find(data => data.id == x.id); //set the "checked" value
    });
    this.block = true;
}

close() {
    //our save "reference", the Status was
    this.itemEdit.Status = this.statusdata
      .filter(x => x.checked)  //get only the values of statusdata.checked
      .map((d: any) => {  //but only want object with id and name properties
        return { id: d.id, name: d.name };
      });
    this.block = false;
}

The .html file uses [(ngModel)]

Status-checkbox:
 <div style="float:left" *ngFor="let status of statusdata">
    <input type="checkbox" [(ngModel)]="status.checked" 
            value="status.id" />
    {{status.name}}
</div>

Your forked StackBlitz

Update: If we have a select input instead of checkboxes, the technique is similar.

You need a variable statusEdit and use [(ngModel)]

Status-checkbox:<div style="float:left">
        <select [(ngModel)]="statusEdit" >
   <option *ngFor="let status of statusdata"  [value]="status.id">{{status.name}}</option>
 </select>

The edit and close functions would then look like this (note that we are now modifying dataItem.Status[0] since Status is an array with one element):

  edit(dataItem) {
    this.itemEdit = dataItem;
    this.statusEdit = dataItem.Status[0].id;
    this.block = true;
}
close() {
    this.itemEdit.Status[0] = {
      ...this.statusdata.find(x => x.id == this.statusEdit)
    };
    this.block = false;
}

Once again, feel free to check out your updated link on StackBlitz

Answer 5

Answer №3

After reviewing your stackblitz example and the instructions provided, I was able to resolve the issue with the selected checkbox not being checked.

Firstly, you need to update the parameters of your edit function with the following code:

<tr *ngFor="let row of groups; let i = index">
    <td>{{row.name}}</td>
    <td>{{row.items}}</td>
    <td>
        <span class="status" *ngFor="let item of row.Status; let j = index">
            {{item.name}}
        </span> <span  *ngIf="i == hoverIndex" class="hover-details"></span>
    </td>
    <td style="cursor:pointer;" (click)="edit(row.Status);">Edit</td>
</tr>

Create a variable at the top of the page:

selected_item_id = 0;

Make some updates to your edit function as follows:

edit(dataItem){
    this.block = true;  
    this.selected_item_id = dataItem[0].id;
}

Lastly, update the options in the select box with the following code:

<select>
    <option *ngFor="let status of statusdata" [selected]="status.id == selected_item_id">{{status.name}} </option>
</select>

I believe everything has been covered now.

Answer 6

After reviewing your stackblitz example and the instructions provided, I was able to resolve the issue with the selected checkbox not being checked.

Firstly, you need to update the parameters of your edit function with the following code:

<tr *ngFor="let row of groups; let i = index">
    <td>{{row.name}}</td>
    <td>{{row.items}}</td>
    <td>
        <span class="status" *ngFor="let item of row.Status; let j = index">
            {{item.name}}
        </span> <span  *ngIf="i == hoverIndex" class="hover-details"></span>
    </td>
    <td style="cursor:pointer;" (click)="edit(row.Status);">Edit</td>
</tr>

Create a variable at the top of the page:

selected_item_id = 0;

Make some updates to your edit function as follows:

edit(dataItem){
    this.block = true;  
    this.selected_item_id = dataItem[0].id;
}

Lastly, update the options in the select box with the following code:

<select>
    <option *ngFor="let status of statusdata" [selected]="status.id == selected_item_id">{{status.name}} </option>
</select>

I believe everything has been covered now.

Tips for setting the checkbox and select box to be automatically checked based on specific column values in Angular 7

app.component.html

app.component.ts

Answer №1

Answer №2

Answer №3

Similar questions

Displaying an image on canvas while showing a loading progress bar

"When implementing an Ajax autorefresh feature, ensure you pass the necessary variables consistently to update the content. Don't overlook

Challenges arise when incorporating interfaces within a class structure

Guide on triggering background notifications to display in the foreground of an Angular Firebase application using Angular 9 webapp

Display the list items when the page first loads

When using the Android platform, the webpage may not be loading correctly and certain links may be unresponsive in the webview

Problem Encountered with Jquery Validation for Name Field (Restriction to Alphabetic

Why is NgOnChanges not Triggering Following HTTP Request?

"I am experiencing an issue with a tick symbol not displaying correctly in my

JavaScript and HTML: Creating Single Page Applications and Managing asynchrony cancellation

Elevate Your Flipclock.js

Combining SPA and ASP.NET MVC Routing techniques

Adding a document to Angular

TS2403 error occurs when an unexported variable with an identical name is utilized in multiple files

No data found in req.query object in ExpressJS

Angular - Enhance ngFor index while filtering

Exploring Angular 2 on Apache: A Guide to Optimizing for Search Engine

Create code with a form button and showcase the produced code on the webpage

What is the best way to emphasize a div depending on a query outcome?

Stop the CSS animation when the cursor leaves and resume from the same position