ojetivos-bn.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)="agregar()">
        <span class="institution">
          <span><mat-icon>emoji_objects</mat-icon> </span>
          <span class="institution-name">Objetivos </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>
    <!-- Div del área de búsqueda -->
    <div class="area-busqueda">
      <mat-form-field class="form-field">
        <mat-label>Filtrar Objetivos</mat-label>
        <mat-select [(ngModel)]="selectedTipo" (selectionChange)="applyFilterByTipo()">
          <mat-option value="">---</mat-option>
          <mat-option *ngFor="let item of dataSource.filteredData" [value]="item.uzytavobjetivo_b_vivirdescripcion">
            {{ item.uzytavobjetivo_b_vivirdescripcion }}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <!--<input type="text" matInput (keyup)="applyFilter($event)" placeholder="Buscar..." #input />-->
    </div>
  </div>

  <!-- Div de la tabla -->


  <div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort>
      <!-- Nro Column -->
      <ng-container matColumnDef="Nro" class="Column1">
        <th class="Column1 negrita" 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="objetivoB" class="Column">
        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header> Objetivo PLNBV Descripción</th>
        <td class="Column" mat-cell *matCellDef="let dato"> {{ getobj(dato)}} </td>
      </ng-container>

      <!-- Parroquia Column -->
      <!-- Dirección Column -->
      <ng-container matColumnDef="politica" class="Column">
        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header> Politica Descripción</th>
        <td class="Column" mat-cell *matCellDef="let dato"> {{ getpo(dato)}} </td>
      </ng-container>

      <!-- Tipo Column -->

      <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)="editar(dato.uzytavclaspre_id)">edit</mat-icon>
            </button>
            <!-- Eliminar -->
          </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>