Crear una función en Angular 17 que permita seleccionar varios IDs de una tabla y mostrarlos en la vista HTML

Para crear una función en Angular que permita seleccionar varios IDs de una tabla y mostrarlos en la vista HTML, puedes seguir estos pasos:

1. Crea el componente y su plantilla HTML.
2. Define el modelo de datos y la lógica para seleccionar y mostrar los IDs.
3. Implementa la lógica en el archivo TypeScript del componente.

A continuación, te proporciono un ejemplo paso a paso:

Paso 1: Configurar el Componente

Crea un nuevo componente si aún no lo has hecho:

sh
ng generate component table-selection

Paso 2: Definir el Modelo de Datos y la Lógica en el TypeScript del Componente

En el archivo table-selection.component.ts, define un arreglo de objetos que representen los datos de la tabla. Además, crea una función para manejar la selección de filas.

typescript
import { Component } from '@angular/core';

interface TableRow {
  id: number;
  name: string;
}

@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' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
    { id: 4, name: 'Item 4' },
  ];

  selectedIds: number[] = [];

  toggleSelection(id: number): void {
    const index = this.selectedIds.indexOf(id);
    if (index !== -1) {
      this.selectedIds.splice(index, 1);
    } else {
      this.selectedIds.push(id);
    }
  }
}

Paso 3: 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.

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

  <h3>Selected IDs:</h3>
  <p>{{ selectedIds.join(', ') }}</p>
</div>

Paso 4: Agregar Estilos Opcionales

Puedes agregar estilos opcionales para destacar las filas seleccionadas. En el archivo table-selection.component.css:

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

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

tr.selected {
  background-color: #f2f2f2;
}

Paso 5: 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 ejemplo ilustra cómo crear una tabla en Angular que permita seleccionar varias filas mediante checkboxes y mostrar los IDs seleccionados en la vista. La función toggleSelection maneja la lógica para añadir o eliminar IDs del array selectedIds cuando se hace clic en los checkboxes.