<!-- 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">Perfiles de Usuario</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 de Perfil" class="Column"> <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header> Nombre de Perfil </th> <td class="Column" mat-cell *matCellDef="let dato"> {{dato.uzytperfil_nombre}} </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.id)">edit</mat-icon> </button> <!-- Eliminar --> <button> <mat-icon color="warn" (click)="eliminarParametro(dato.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]="5" [pageSizeOptions]="[5,10, 20, 50]"></mat-paginator> </div> </div>