What is the process for retrieving the checked ID from a checkbox, sending the selected ID to a URL using a query parameter, and then retrieving it in

Question

What is the process for retrieving the checked ID from a checkbox, sending the selected ID to a URL using a query parameter, and then retrieving it in

I am working on a table that contains multiple fields,

My goal is to enable row selection using checkboxes.

name     Age      date
-----------------------
aaa      22       12-06-2019
bbb      23       13-06-2019
ccc      24       21-09-2019

In this scenario:

1. I need to be able to select rows using checkboxes.

2. Upon selecting a row, I should retrieve the unique ID associated with that row.

3. The selected IDs should then be included in a URL format like (), where 1, 2, and 3 represent the IDs of different fields.

4. Finally, I want to display and print these selected values.

Here are my questions:

How can I retrieve the row's ID upon checkbox selection?
What is the best way to print selected rows using Angular 8?

If anyone has any insights or guidance, please feel free to share!

angular typescript angular6 angular7 angular8

Answer 1

Answer №1

View the live demonstration here

Inside the Class file:

data:

   list: any = [
        {id:1, 'name': 'aaa', 'age': 22, 'date': '12-06-2019'},
        {id:2, 'name': 'bbb', 'age': 23, 'date': '13-06-2019'},
        {id:3, 'name': 'ccc', 'age': 25, 'date': '21-09-2019'}
   ];

// Storing selected id in an array

checkedItems: any = [];

// Function to handle when user checks or unchecks a checkbox

 onChecked(item: any, event: any){
    let {checked, value} = event.target;
    if(checked) {
      this.checkedItems.push(value);
    } else {
      let index = this.checkedItems.indexOf(value);
      if (index !== -1) this.checkedItems.splice(index, 1);
    }
  }

To pass the selected item to the query parameter

 this.router.navigate(['/other'], {relativeTo: this.route, queryParams: { id: this.checkedItems.join() } });

Template file:

Iterating over the list and generating a table with checkboxes and binding onChange Event with its handler named onChecked

 <ng-container *ngFor="let item of list">
      <tr>
        <td>
          <input 
            type="checkbox" 
            [value]="item.id" 
            (change)="onChecked(item, $event)">
        </td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.date}}</td>
      </tr>
    </ng-container>

Answer 2

View the live demonstration here

Inside the Class file:

data:

   list: any = [
        {id:1, 'name': 'aaa', 'age': 22, 'date': '12-06-2019'},
        {id:2, 'name': 'bbb', 'age': 23, 'date': '13-06-2019'},
        {id:3, 'name': 'ccc', 'age': 25, 'date': '21-09-2019'}
   ];

// Storing selected id in an array

checkedItems: any = [];

// Function to handle when user checks or unchecks a checkbox

 onChecked(item: any, event: any){
    let {checked, value} = event.target;
    if(checked) {
      this.checkedItems.push(value);
    } else {
      let index = this.checkedItems.indexOf(value);
      if (index !== -1) this.checkedItems.splice(index, 1);
    }
  }

To pass the selected item to the query parameter

 this.router.navigate(['/other'], {relativeTo: this.route, queryParams: { id: this.checkedItems.join() } });

Template file:

Iterating over the list and generating a table with checkboxes and binding onChange Event with its handler named onChecked

 <ng-container *ngFor="let item of list">
      <tr>
        <td>
          <input 
            type="checkbox" 
            [value]="item.id" 
            (change)="onChecked(item, $event)">
        </td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.date}}</td>
      </tr>
    </ng-container>

Answer 3

Answer №2

To include IDs in the query parameters of a URL, you can simply pass them along.

constructor(
  private router: Router,
  private route: ActivatedRoute,
) {}

changeQuery() {
  this.router.navigate(['.'], { relativeTo: this.route, queryParams: { ... }}); 
}

How do I retrieve the ID by selecting the checkbox?

You can achieve this by using the following code:

check(values, id){
  console.log(values.currentTarget.checked, id);
}

<tr *ngFor="let test of tests" >
  <td>
    <input type="checkbox" (change)="check($event, test.id)" [(ngModel)]="test.selected" > {{test.name}} - {{test.selected}}
  </td>
</tr>

How can I display the selected rows using Angular 8?

<div *ngFor="let row of selectedRows">
  <lable>row.col1</lable>
  <lable>row.col2</lable>
</div>

Answer 4

To include IDs in the query parameters of a URL, you can simply pass them along.

constructor(
  private router: Router,
  private route: ActivatedRoute,
) {}

changeQuery() {
  this.router.navigate(['.'], { relativeTo: this.route, queryParams: { ... }}); 
}

How do I retrieve the ID by selecting the checkbox?

You can achieve this by using the following code:

check(values, id){
  console.log(values.currentTarget.checked, id);
}

<tr *ngFor="let test of tests" >
  <td>
    <input type="checkbox" (change)="check($event, test.id)" [(ngModel)]="test.selected" > {{test.name}} - {{test.selected}}
  </td>
</tr>

How can I display the selected rows using Angular 8?

<div *ngFor="let row of selectedRows">
  <lable>row.col1</lable>
  <lable>row.col2</lable>
</div>

What is the process for retrieving the checked ID from a checkbox, sending the selected ID to a URL using a query parameter, and then retrieving it in

Answer №1

Answer №2

Similar questions

Performing a function call in Angular2 directly from an HTML element without the need for a load event or similar event

The command 'npm cache clean' is failing to work in the Angular environment when using Visual Studio Code as the integrated

ionChange - only detect changes made in the view and update the model in Ionic 2

What are the steps to implementing AngularFireDatabase in Angular version 13?

Issue arises with protractor peer dependencies during the installation of packages in Angular 13

Receiving an error while trying to install packages from the NPM registry due to non

What is the process for transforming an Object into a different type in this specific scenario?

When the webpage is reloaded in Internet Explorer, a file is automatically downloading. How can this issue be resolved?

Show information in two separate columns based on a specific criteria

Troubleshooting problem with @Input number in Angular 2

How can we dynamically update a type in Typescript based on the existence of a particular property after filtering?

Utilizing Angular 7, Ngrx, and Rxjs 6 to efficiently share state data among lazily loaded modules

Bringing Typescript functions into the current module's scope

Errors persist with Angular 2 iFrame despite attempts at sanitization

The promise of returning a number is not compatible with a standalone number

Disabling the intellisense feature for locale suggestions in Monaco is recommended

The FileLoader in Three.js does not have a constructor when passed through the scope manager

What is the best way to send a search parameter to a URL?

Typescript conditional types make room for the inclusion of null values

Encountering an unknown error with lite server when running npm start