<mat-expansion-panel> <button mat-raised-button class="buttonUpdate" color="primary" (click)="obtenerProductos()">Actualizar <mat-icon>update</mat-icon> </button> <mat-expansion-panel-header> <mat-panel-title class="text"> Productos </mat-panel-title> </mat-expansion-panel-header> <div class="scrollme"> <table mat-table [dataSource]="dataSourceProd" class="mat-elevation-z8"> <ng-container matColumnDef="id"> <th mat-header-cell *matHeaderCellDef> ID </th> <td mat-cell *matCellDef="let element"> {{element.id}} </td> </ng-container> <ng-container matColumnDef="descripcion"> <th mat-header-cell *matHeaderCellDef> DESCRIPCIÓN </th> <td mat-cell *matCellDef="let element"> <mat-form-field class="example-form-field"> <input matInput type="text" [value]="element.descripcion" (keyup)="changeValueDescTipo($event.target,element)" maxlength="15" [disabled]="!element.editable"> </mat-form-field> </td> </ng-container> <ng-container matColumnDef="botonEdit"> <th mat-header-cell *matHeaderCellDef> EDITAR </th> <td mat-cell *matCellDef="let element"> <button mat-icon-button color="primary" (click)="actualizarProd(element,tipoProductoModelo)"> <mat-icon>edit</mat-icon> </button> </td> </ng-container> <ng-container matColumnDef="botonDelete"> <th mat-header-cell *matHeaderCellDef> ELIMINAR </th> <td mat-cell *matCellDef="let element"> <button mat-icon-button color="warn" (click)="eliminarProductos($event.target,element)"> <mat-icon>delete</mat-icon> </button> </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumnsProd"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumnsProd"> </tr> </table> </div> <mat-paginator #paginatorCatalogos [pageIndex]="0" [pageSize]="5" [pageSizeOptions]="[5]" showFirstLastButtons> </mat-paginator> </mat-expansion-panel>
<mat-expansion-panel> <button mat-raised-button class="buttonUpdate" color="primary" (click)="obtenerProductos()">Actualizar <mat-icon>update</mat-icon> </button> <mat-expansion-panel-header> <mat-panel-title class="text"> Productos </mat-panel-title> </mat-expansion-panel-header> <div class="scrollme"> <table mat-table [dataSource]="dataSourceProd" class="mat-elevation-z8"> <ng-container matColumnDef="id"> <th mat-header-cell *matHeaderCellDef> ID </th> <td mat-cell *matCellDef="let element"> {{element.id}} </td> </ng-container> <ng-container matColumnDef="descripcion"> <th mat-header-cell *matHeaderCellDef> DESCRIPCIÓN </th> <td mat-cell *matCellDef="let element"> <mat-form-field class="example-form-field"> <input matInput type="text" [value]="element.descripcion" (keyup)="changeValueDescTipo($event.target,element)" [disabled]="!element.editable"> </mat-form-field> <span class="error" *ngIf="e.limiteExcedido">El tamaño máximo para este campo es de 15</span> </td> </ng-container> <ng-container matColumnDef="botonEdit"> <th mat-header-cell *matHeaderCellDef> EDITAR </th> <td mat-cell *matCellDef="let element"> <button mat-icon-button color="primary" (click)="actualizarProd(element,tipoProductoModelo)"> <mat-icon>edit</mat-icon> </button> </td> </ng-container> <ng-container matColumnDef="botonDelete"> <th mat-header-cell *matHeaderCellDef> ELIMINAR </th> <td mat-cell *matCellDef="let element"> <button mat-icon-button color="warn" (click)="eliminarProductos($event.target,element)"> <mat-icon>delete</mat-icon> </button> </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumnsProd"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumnsProd"> </tr> </table> </div> <mat-paginator #paginatorCatalogos [pageIndex]="0" [pageSize]="5" [pageSizeOptions]="[5]" showFirstLastButtons> </mat-paginator> </mat-expansion-panel>
component.ts
changeValueDescTipo(e: any, row: any) {
this.idSelecc = row.id;
this.tipoProductoDesc = e.value;
if (this.tipoProductoDesc.length > 15) {
e.limiteExcedido = true;
e.target.value = this.tipoProductoDesc.slice(0, 15);
} else {
e.limiteExcedido = false;
}
}