Angular - Checkbox in table and iterate through the items

Riddhi Valecha

5y1.5kAngular

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

Pending Assets
class="container">
class='table table-striped'>
Computer.ComputerType
Model.Brand.Name
Model.Name
Computer.TcpIpHostName
Asset.SerialNo
User.UserName
RIL_Inventoried_User.UserName
Asset.Field1
"let pa of pendingasset">
{{ pa.computerComputerType }}
{{ pa.modelBrandName }}
{{ pa.modelName }}
{{ pa.computerTcpIpHostName }}
{{ pa.assetSerialNo }}
{{ pa.userUserName }}
{{ pa.rIL_Inventoried_UserUserName }}
{{ pa.assetField1 }}
{{ pa.modelName }}

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

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Riddhi Valecha5y ago
Hello Team,

Please help me in Angular -

Object Oriented Programming concepts in Angular in TypeScript.

1. In "export class classname {}" , can we define / declare more classes and functions?
2. How do we write a for loop/for each loop in angular ?
3. I need to get total selected records in button click - how do I get those?
Ronika Jency5y ago
Hi,

If my previous answer helped you, please accept my answer.

you can inject as below in class,
@Injectable({ providedIn: 'root' })
export class CustomerService {

url: string
constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
this.url = baseUrl;

if (this.url.charAt(this.url.length - 1) == '/')
this.url = this.url.substring(0, this.url.length - 1);
}
//method declare
}
Riddhi Valecha5y ago
Hello Team,

I need 1 more help here. Can anyone guide me on how to make functions/methods in export class?

Example -
export class PendingAssets {
baseUrl: string;
constructor()
{
this.getpendassets();
}
getpendassets() {
http: HttpClient;
@Inject('BASE_URL') baseUrl: String;
//this.baseUrl = @Inject('BASE_URL');
return this.http.get(baseUrl + 'api/PendingAssetsAPI');
}
}
How do I declare @Inject('BASE_URL') in a method and call in the class ?
Riddhi Valecha5y ago
Hello,
Yes, I am able to create the checkbox.
Now, I am facing issues in the following -
1. I need a multiple-selection table / gridview in angular.
2. On button click, I need to check how many rows are selected.
3. If selected rows are more than zero, then iterate through the items.
4. For each item, I need to call 1 api.
E.g.
ID Device Name Model Brand
1 Laptop HP HP
2 CPU Acer Acer
3 Desktop Dell Dell
4 iPAD Lenovo
Lenovo
Now, say if ID - 2 and 3 are selected, then
foreach (var items in list)
{
if (row is selected)
{
ID = 2;
Call API here - where ID = 2
}
}
Ronika Jency5y ago
Hi,

You can declare one more variable in your model called checked.

model Code
Checked: boolean;

pendassets array as you mentioned. if you have any unique value then bind with id="{{item.id}}" id attribute. Or else pass id from table. and bind it in id attribute.

html code
[(ngModel)]="item.checked">
You can easily get the checked value from checked model.

ID	Device Name	Model	Brand
1	Laptop	HP	HP
2	CPU	Acer	Acer
3	Desktop	Dell	Dell
4	iPAD	Lenovo	Lenovo

Angular - Checkbox in table and iterate through the items

Pending Assets