Tengo el siguiente formulario, al hacer click en el botón agregar, se despliega un mat-dialog donde se puede agregar una nueva descripción para después ser mostrada en la tabla, hace bien la operación y manda un mensaje de éxito, pero al cerrar ese mensaje de éxito se queda la ventana del mat-dialog y quiero que en automático se cierre cuando sale la ventana de exito.
En el Component.ts mando a llamar al metodo openDialog para que abra la ventana de agregar una nueva descripción que esta en el componente AgregarNuevo
import { Component, ViewChild } from '@angular/core';
import { CatalogosServiceService } from './catalogos-service.service';
import { CatalogoProducto } from './CatalogoProducto';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { CatalogoSubProducto } from './CatalogoSubProducto';
import { FormGroup } from '@angular/forms';
import Swal from 'sweetalert2';
import { AgregarNuevoComponent } from './agregar-nuevo/agregar-nuevo.component';
import { MatDialog } from '@angular/material/dialog';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'pruebaforms';
panelOpenState = false;
displayedColumns: string[] = ['idProducto', 'descripcionProducto','botonTipoActions'];
displayedColumnsSubProd: string[] = ['idSubProducto', 'descripcionSubProducto'];
catProducto: CatalogoProducto[] = [];
catSubProducto: CatalogoSubProducto[] = [];
@ViewChild(MatPaginator) paginator!: MatPaginator;
producto: CatalogoProducto = new CatalogoProducto();
constructor(private catService: CatalogosServiceService, public dialog: MatDialog) {}
ngOnInit(): void {
this.obtenerCatalogoProducto();
this.obtenerCatalogoSubProducto();
}
//obtiene la lista del cat producto
dataSource: any;
obtenerCatalogoProducto() {
this.catService.obtenerCatProd().subscribe((response) => {
this.catProducto = response.data;
console.log('PRUEBA CAT PROD ', response.data);
this.dataSource = new MatTableDataSource(this.catProducto);
this.dataSource.paginator = this.paginator;
});
}
//obtiene la lista del cat subproducto
dataSourceSubProducto: any;
private obtenerCatalogoSubProducto() {
this.catService.obtenerCatSubProd().subscribe((response) => {
this.catSubProducto = response.data;
console.log('PRUEBA CAT SUBPROD ', response.data);
this.dataSourceSubProducto = new MatTableDataSource(this.catSubProducto);
this.dataSourceSubProducto.paginator = this.paginator;
});
}
openDialog():void{
this.dialog.open(AgregarNuevoComponent,{
width: '500px',
height: '240px'
});
}
async eliminar(element: any, row:any){
console.log("ID ", row.idProducto);
const deleteAlert = Swal.fire({
title: '¿Está seguro de eliminar los valores?',
showDenyButton: true,
confirmButtonText: 'Si',
});
if((await deleteAlert).isConfirmed){
const index = this.dataSource.data.indexOf(element);
this.dataSource.data.splice(index);
this.dataSource = new MatTableDataSource(this.dataSource.data);
this.producto.idProducto = row.idProducto;
console.log("IDDD ", this.producto.idProducto);
this.catService.eliminarProductos(this.producto).subscribe(data => {
Swal.fire({
icon: 'success',
title: 'Éxito',
text: 'Registro borrado correctamente'
});
})
}
}
}
html
<div class="container">
<mat-accordion>
<mat-expansion-panel hideToggle>
<mat-expansion-panel-header>
<mat-panel-title>
PRODUCTO
</mat-panel-title>
</mat-expansion-panel-header>
<form>
<br>
<button mat-raised-button color="primary" (click)="openDialog()"> Agregar
<mat-icon>add</mat-icon>
</button>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="idProducto">
<th mat-header-cell *matHeaderCellDef>ID.</th>
<td mat-cell *matCellDef="let element">{{ element.idProducto }}</td>
</ng-container>
<ng-container matColumnDef="descripcionProducto">
<th mat-header-cell *matHeaderCellDef>PRODUCTO</th>
<td mat-cell *matCellDef="let element">
<mat-form-field>
<input matInput [value]="element.descripcionProducto" />
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="botonTipoActions">
<th mat-header-cell *matHeaderCellDef> ACCIONES </th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button color="primary">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button color="warn" (click)="eliminar($event.target,element)">
<mat-icon>delete</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
</form>
<mat-paginator [pageSizeOptions]="[5, 10]" showFirstLastButtons aria-label="Select page of periodic elements">
</mat-paginator>
</mat-expansion-panel>
<!---------- TABLA SUBPRODUCTO -->
<mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
<mat-expansion-panel-header>
<mat-panel-title>
SUB PROD
</mat-panel-title>
</mat-expansion-panel-header>
<table mat-table [dataSource]="dataSourceSubProducto" class="mat-elevation-z8">
<ng-container matColumnDef="idSubProducto">
<th mat-header-cell *matHeaderCellDef>ID.</th>
<td mat-cell *matCellDef="let element">{{ element.idSubProducto }}</td>
</ng-container>
<ng-container matColumnDef="descripcionSubProducto">
<th mat-header-cell *matHeaderCellDef>SUBPRODUCTO</th>
<td mat-cell *matCellDef="let element">
<mat-form-field>
<input matInput [value]="element.descripcionSubProducto" />
</mat-form-field>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsSubProd"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsSubProd"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10]" showFirstLastButtons aria-label="Select page of periodic elements">
</mat-paginator>
</mat-expansion-panel>
</mat-accordion>
</div>
AgregarNuevoCompoennt.ts
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { CatalogoProducto } from '../CatalogoProducto';
import { CatalogosServiceService } from '../catalogos-service.service';
import Swal from 'sweetalert2';
@Component({
selector: 'app-agregar-nuevo',
templateUrl: './agregar-nuevo.component.html',
styleUrls: ['./agregar-nuevo.component.css']
})
export class AgregarNuevoComponent implements OnInit {
catalogoProductoModel: CatalogoProducto = new CatalogoProducto();
nuevoForm!: FormGroup;
descripcion = new FormControl('',[Validators.required, Validators.maxLength(15)]);
constructor(public dialogRef: MatDialogRef<AgregarNuevoComponent>, private catService: CatalogosServiceService) { }
ngOnInit(): void {
this.nuevoForm = new FormGroup({
descripcion: new FormControl('',[Validators.required, Validators.maxLength(15)])
})
}
agregar(){
if(this.nuevoForm.valid){
console.log("es valido")
console.log("DESCRIPCION ", this.nuevoForm.get('descripcion')?.value);
this.catalogoProductoModel.descripcionProducto = this.nuevoForm.get('descripcion')?.value;
this.catService.agregarNuevoProducto(this.catalogoProductoModel).subscribe(response => {
Swal.fire({
icon: 'success',
title: 'Éxito',
text: 'Agregado correctamente'
});
})
}
}
restablecer(){
this.nuevoForm.get('descripcion')?.reset();
}
}
AgregarNuevo html
<form [formGroup]="nuevoForm">
<table class="example-full-width" cellspacing="0">
<tr>
<td>
<mat-form-field class="example-full-width">
<mat-label>Descripcion:</mat-label>
<input matInput formControlName="descripcion">
</mat-form-field>
</td>
</tr>
</table>
<div>
<button mat-button (click)="agregar()">Agregar</button>
<button mat-button (click)="restablecer()">Restablecer</button>
</div>
</form>
¿Cómo puedo hacer para que al cerrar la ventana de exito, desaparezca la ventana del mat-dialog? que necesito agregar?