Sumar los valores de precio de las filas seleccionadas y mostrar el total en la vista con Angular 17

 Para sumar los valores de precio de las filas seleccionadas y mostrar el total en la vista con Angular 17, puedes modificar el componente que hemos creado anteriormente. Aquí tienes los pasos detallados para implementar esta funcionalidad:

Paso 1: Configurar el Componente

1. Genera el componente si aún no lo has hecho:

   bash
   ng generate component table-selection
   

2. Define el modelo de datos y la lógica en el archivo TypeScript del componente:

   typescript
   import { Component } from '@angular/core';
   
   interface TableRow {
     id: number;
     name: string;
     price: number;
   }
   
   @Component({
     selector: 'app-table-selection',
     templateUrl: './table-selection.component.html',
     styleUrls: ['./table-selection.component.css']
   })
   export class TableSelectionComponent {
     rows: TableRow[] = [
       { id: 1, name: 'Item 1', price: 100 },
       { id: 2, name: 'Item 2', price: 200 },
       { id: 3, name: 'Item 3', price: 150 },
       { id: 4, name: 'Item 4', price: 250 },
     ];
   
     selectedItems: Map<number, TableRow> = new Map<number, TableRow>();
   
     toggleSelection(row: TableRow): void {
       if (this.selectedItems.has(row.id)) {
         this.selectedItems.delete(row.id);
       } else {
         this.selectedItems.set(row.id, row);
       }
     }
   
     isSelected(id: number): boolean {
       return this.selectedItems.has(id);
     }
   
     getTotalPrice(): number {
       let total = 0;
       this.selectedItems.forEach(item => {
         total += item.price;
       });
       return total;
     }
   }
   

   En este código:

   • Usamos un Map<number, TableRow> para manejar los elementos seleccionados, evitando duplicaciones.
   • La función toggleSelection añade o elimina un objeto TableRow del Map dependiendo de si ya está seleccionado.
   • La función isSelected verifica si un ID está en el Map.
   • La función getTotalPrice calcula la suma de los precios de los elementos seleccionados.

Paso 2: Implementar la Plantilla HTML

En el archivo table-selection.component.html, define la tabla y utiliza un evento click para manejar la selección de filas con checkboxes. Muestra el total de los precios seleccionados.

html
<div>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Price</th>
        <th>Select</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let row of rows" [class.selected]="isSelected(row.id)">
        <td>{{ row.id }}</td>
        <td>{{ row.name }}</td>
        <td>{{ row.price }}</td>
        <td>
          <input 
            type="checkbox" 
            (change)="toggleSelection(row)" 
            [checked]="isSelected(row.id)">
        </td>
      </tr>
    </tbody>
  </table>

  <h3>Selected Items:</h3>
  <ul>
    <li *ngFor="let item of selectedItems.values()">
      ID: {{ item.id }}, Price: {{ item.price }}
    </li>
  </ul>

  <h3>Total Price: {{ getTotalPrice() }}</h3>
</div>

• Usamos [class.selected]="isSelected(row.id)" para aplicar un estilo CSS a las filas seleccionadas.
• La propiedad [checked]="isSelected(row.id)" asegura que los checkboxes reflejen correctamente la selección.
• Utilizamos *ngFor para iterar sobre los valores del Map y mostrar los IDs y precios de los elementos seleccionados.
• Mostramos el total de los precios seleccionados usando {{ getTotalPrice() }}.

Paso 3: Agregar Estilos CSS

En el archivo table-selection.component.css, define los estilos para las filas seleccionadas y la tabla.

css
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

tr.selected {
  background-color: #e0f7fa; /* Cambia el color para que se ajuste a tu diseño */
}

input[type="checkbox"] {
  cursor: pointer;
}

Paso 4: Agregar el Componente en la Aplicación

Asegúrate de que el componente se use en la aplicación principal. Abre el archivo app.component.html y añade:

html
<app-table-selection></app-table-selection>

Resumen

Este enfoque permite seleccionar varias filas en una tabla usando checkboxes, evita selecciones repetidas mediante el uso de un Map, y aplica estilos CSS a las filas seleccionadas. La función toggleSelection maneja la lógica para agregar o quitar objetos TableRow del Map, mientras que isSelected se utiliza para determinar si una fila está seleccionada y aplicar el estilo adecuado. Además, los IDs y precios de las filas seleccionadas se muestran en la vista utilizando un *ngFor sobre los valores del Map, y el total de los precios seleccionados se calcula y se muestra en la vista.