How to get the checkbox and select box checked by default based on column value of particular row in angular 7

Question

I have a table whose value comes from a json contains some columns.When ever you click edit button, a box will be open,in which checkbox value will come from other json(statusdata),till now its fine now the problem is checked will be based on status column value of clicked row,to close the box click on close link,Here is 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;
}
}

Answer 1

If you want to handle the checked state of check boxes, introduce a variable in your array to hold the state of checkbox. The following change should help you.

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

I supouse you want not only show is is checked else can change. So use [(ngModel)], not [checked]. the code of Narayanan work good, but it can be simplified.

Moreover, to take account the changes we need an auxiliar variable "itemEdit". The functions edit and close can be like

itemEdit:any //<--declare an auxiliar variable where save the "item we are editing"

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); //give "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 use [(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 has a select, not a series of checkbox, the tecnica is similar

You has 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 functions becomes into: (see that we are changing dataItem.Status[0], becaouse Status is an array of 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;
  }

Again, your forked link

Answer 3

As I went to your stackblitz example and the description you gave me i resolve the issue related to the selected checkbox were not checked.

First this you have to update you edit function parameter values by below 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 in top of the page:

selected_item_id = 0;

and then some update in your edit function as well like:

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

After all this you have to update the option of select box by the below code:

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

Hope did not miss anything.