Angular - Checkbox in table and iterate through the items

Question

Dear Team,

 

I have made a service and html file in Angular.

 

I need to include a checkbox in the table and iterate through the items.

 

File - p.components.html

<h1>Pending Assets</h1>
<div class="container">
<table class='table table-striped'>
<thead>
<tr>
<th>Computer.ComputerType</th>
<th>Model.Brand.Name</th>
<th>Model.Name</th>
<th>Computer.TcpIpHostName</th>
<th>Asset.SerialNo</th>
<th>User.UserName</th>
<th>RIL_Inventoried_User.UserName</th>
<th>Asset.Field1</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let pa of pendingasset">
<td>{{ pa.computerComputerType }}</td>
<td>{{ pa.modelBrandName }}</td>
<td>{{ pa.modelName }}</td>
<td>{{ pa.computerTcpIpHostName }}</td>
<td>{{ pa.assetSerialNo }}</td>
<td>{{ pa.userUserName }}</td>
<td>{{ pa.rIL_Inventoried_UserUserName }}</td>
<td>{{ pa.assetField1 }}</td>
<td> {{ pa.modelName }} </td>
</tr>
</tbody>
</table>
</div>

File - p.component.ts

import { Component, Inject, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import xml2js from 'xml2js';
import { HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
//import { AgGridModule } from "ag-grid-angular/main";
//import { GridOptions } from "ag-grid/main";
@Component({
selector: 'app-pendingassets',
templateUrl: './pendingassets.component.html'
//styleUrls: ['./pendingassets.component.css']
})
export class PendingAssets {
public pendingasset: pendassets[];
constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
http.get<pendassets[]>(baseUrl + 'api/PendingAssetsAPI').subscribe(result => {
this.pendingasset = result;
}, error => console.error());
}
}
interface pendassets {
ComputerComputerType: string;
ModelBrandName: string;
ModelName: string;
ComputerTcpIpHostName: string;
AssetSerialNo: string;
UserUserName: string;
RIL_Inventoried_UserUserName: string;
AssetField1: string;
}