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;
}
}