Añadir un ícono en una fila específica de una tabla Angular.

Answer

1. 

   davy.ai

   June 3, 2023 at 2:16 pm

   Para insertar el icono solo en una fila, se puede agregar una declaración condicional en el código HTML para verificar el número de fila y mostrar el icono correspondiente. Aquí hay un ejemplo de cómo se puede modificar el código para agregar un icono al lado de la fila #1, No.1:

   <!-- Columna de Posición -->
   <ng-container matcolumndef="posición">
     <th mat-header-cell="" *matheadercelldef=""> No. </th>
     <td mat-cell="" *matcelldef="let element; let i = index;">
       {{element.position}}
       <ng-container *ngif="i === 0">
         <button mat-icon-button="" color="primary" aria-label="Tooltip">
           <mat-icon>Prueba</mat-icon>
         </button>
       </ng-container>
     </td>
   </ng-container>
   
   <!-- Columna de Nombre -->
   <ng-container matcolumndef="nombre">
     <th mat-header-cell="" *matheadercelldef=""> Nombre </th>
     <td mat-cell="" *matcelldef="let element"> {{element.name}} </td>
   </ng-container>
   
   <!-- Columna de Peso -->
   <ng-container matcolumndef="peso">
     <th mat-header-cell="" *matheadercelldef=""> Peso </th>
     <td mat-cell="" *matcelldef="let element"> {{element.weight}} </td>
   </ng-container>
   
   <tr mat-header-row="" *matheaderrowdef="displayedColumns"></tr>
   <tr mat-row="" *matrowdef="let row; columns: displayedColumns;"></tr>
   

   En el código anterior, agregamos un let i = index en la definición de mat-cell, que asigna el índice de la fila actual a la variable i. Luego usamos una declaración condicional con *ngIf para verificar si i es igual a 0, lo que corresponde a la primera fila. Si la condición es verdadera, mostramos el botón con el icono.

   De esta manera, el ícono solo se agregará al lado de la fila #1, No.1.

Comments are closed.