Will Web 3.0 Replace Web 2.0?
Become a member
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
C# Corner Home
Technologies
Monthly Leaders
ASK A QUESTION
Forum guidelines
Riddhi Valecha
660
3.2k
364.4k
Angular - Checkbox in table and iterate through the items
Mar 8 2021 6:27 PM
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;
}
Reply
Answers (
5
)
Consume JWT API
how to create Nested table using angular and api