instituciones.component.html

<!-- Importaciones necesarias -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

<!-- Desarrollo -->
<div class="contenedorP">
  <!-- Div superior -->
  <div class="sobremontado">
    <div>
      <button (click)="AgregarParametro()">
        <span class="institution">
          <mat-icon>school</mat-icon>
          <span class="institution-name">Instituciones</span>
          <span class="add-icon"  style="margin-left: 20px">+</span>
        </span>
      </button>

      <button class="volver" (click)="volver()">
        <mat-icon>keyboard_arrow_left</mat-icon>
      </button>

    </div>
  </div>
  

  <div class="area-busqueda">
    <input type="text" matInput (keyup)="applyFilter($event)" placeholder="Buscar..." #input style="
    padding: 8px;" />
  </div>


  <div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort>

      <!-- Nro Column -->
      <ng-container matColumnDef="Nro" class="Column1">
        <th class="Column1" mat-header-cell *matHeaderCellDef mat-sort-header> Nro </th>
        <td class="Column1" mat-cell *matCellDef="let i = index"> {{ i+1 }} </td>
      </ng-container>

      <!-- Nombre Institución Column -->
      <ng-container matColumnDef="Nombre Institución" class="Column">
        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header> Nombre Institución </th>
        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavinstituc_nombre}} </td>
      </ng-container>

      <!-- Parroquia Column -->
      <ng-container matColumnDef="Parroquia" class="Column">
        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header> Parroquia </th>
        <td class="Column" mat-cell *matCellDef="let dato">
          <input type="text" placeholder="Buscar Parroquia" class="filtro-parroquia">
          {{dato.uzytparroquia?.uzytparroquia_nombre}}
        </td>
      </ng-container>

      <!-- Dirección Column -->
      <ng-container matColumnDef="Dirección" class="Column">
        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header> Dirección </th>
        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavinstituc_calle}} </td>
      </ng-container>

      <!-- Representante Column -->
      <ng-container matColumnDef="Representante" class="Column">
        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header> Representante </th>
        <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytavinstituc_nomrepl}} </td>
      </ng-container>

      <!-- Estado Column -->
      <ng-container matColumnDef="Estado" class="Column2">
        <th class="Column2" mat-header-cell *matHeaderCellDef mat-sort-header> Estado </th>
        <td class="Column2" mat-cell *matCellDef="let dato">
          <section>
            <mat-checkbox [checked]="dato.uzytavinstituc_estado === 'A'" disabled></mat-checkbox>
          </section>
        </td>
      </ng-container>


      <ng-container matColumnDef="Acciones" class="Column2">
        <th class="Column2" mat-header-cell *matHeaderCellDef> Acciones </th>
        <td class="Column2" mat-cell *matCellDef="let dato">
          <div>
            <!-- Editar -->
            <button>
              <mat-icon class="azul"
                (click)="editParametros(dato.uzytavinstituc_id, dato.uzytparroquia?.uzytparroquia_id)">edit</mat-icon>
            </button>
            <!-- Eliminar 

            <button>
              <mat-icon color="warn" (click)="eliminarParametro(dato.uzytavinstituc_id)">delete</mat-icon>
            </button>
            -->
          </div>
        </td>
      </ng-container>


      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

    <mat-paginator #paginator [pageSize]="3" [pageSizeOptions]="[3,10, 20, 50]"></mat-paginator>
  </div>
</div>