Tengo la siguiente tabla donde se puede editar el contenido del campo descripción, y a traves del icono Delete se puede eliminar el registro seleccionado, pero lo hace visualmente nada más, es decir, solo desaparece de la pantalla, pero en si en la BD sigue estando el registro, y lo que quiero es que se elimine de la BD a traves del servicio que ya tengo creado, pero que al hacer click en el icono de Delete, primero te mande un msj que diga, seguro que deseas eliminar el registro? y que tenga el boton de Aceptar/cancelar
mi html
<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>
</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)">
<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
displayedColumnsProd: string[] = ['id', 'descripcion', 'botonEdit', 'botonDelete'];
dataSourceProd: any;
obtenerProductos() {
this.productService.obtenerProducto().subscribe(response => {
if (response.data.length == 0) {
Swal.fire({
icon: 'error',
text: 'Sin datos '
})
} else {
this.tipoProducto = response.data;
this.dataSourceProd = new MatTableDataSource(this.tipoProducto);
this.dataSourceProd.paginatorCatalogos = this.paginatorCatalogos;
}
});
}
//obtiene el valor de la descripcion
changeValueDescTipo(e: any, row: any) {
this.idSelecc = row.id;
this.tipoProductoDesc = e.value;
}
eliminarProductos(element: any,row: any) {
const index = this.dataSourceProd.data.indexOf(element);
this.dataSourceProd.data.splice(index);
this.dataSourceProd = new MatTableDataSource(this.dataSourceProd.data);
this.tipoProducto.id = row.id;
this.productService.eliminarProducto(this.tipoProducto).subscribe(response => {
Swal.fire({
icon: 'success',
title: 'Éxito',
text: '¿Seguro que deseas eliminar el registro?'
});
});
}
Este es el servicio que elimina por ID el registro en la base datos
service.ts
eliminarProducto(tipoProducto: Producto){
return this.httpClient.delete<Producto>(this.baseUrl+"/"+tipoProducto.id);
}
lo que no sé, es como implementar en mi método eliminarProductos() el servicio que elimina por id el registro en la base de datos , pero que antes muestre una alerta para confirmar que se desea eliminar
this.llamadaATuServicio(idDelProducto);
debería de permitirte llamarlo. En cuanto a la alerta, pues depende de qué alerta quieras mostrar, si vas a usar un componente propio, uno nativo o uno de angular material. No podemos hacer las cosas por ti, así que te recomiendo que elijas qué componente quieres usar para mostrar la alerta, lo intentes hacer y si tienes un problema concreto vengas a preguntar. "No se cómo hacerlo" por desgracia no es un problema concreto, es más un problema de no haber investigado e intentado algo, requisito obligatorio a la hora de abrir una pregunta en SO.