Interceptor en Angular para confirmar una petición con un modal Mat Dialog

En este artículo, explicaremos cómo crear un interceptor en Angular que almacene la petición y levante un modal de confirmación con un mat dialog. Además, veremos cómo manejar las respuestas del usuario y continuar o cancelar la petición.

En aplicaciones web, a menudo es necesario confirmar la acción del usuario antes de realizar una petición HTTP.

Para crear un Interceptor en Angular para confirmar una petición con un modal Mat Dialog de confirmación, debemos seguir los siguientes pasos:

Generar el interceptor:

Podemos generar el interceptor utilizando el comando «ng generate interceptor interceptor-name». Por ejemplo, si queremos crear un interceptor llamado «ConfirmInterceptor», podemos ejecutar el siguiente comando:

ng generate interceptor ConfirmInterceptor

Implementar el interceptor:

Una vez generado el interceptor, podemos implementarlo en la aplicación. Para ello, abrimos el archivo «confirm.interceptor.ts» y agregamos el siguiente código:

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import { MatDialog } from '@angular/material/dialog';
import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';

@Injectable()
export class ConfirmInterceptor implements HttpInterceptor {

  constructor(public dialog: MatDialog) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
      data: { message: '¿Está seguro de que desea realizar esta acción?' }
    });

    return new Observable(observer => {
      dialogRef.afterClosed().subscribe(result => {
        if (result) {
          observer.next(request);
        } else {
          observer.complete();
        }
      });
    });
  }
}

Este interceptor utiliza MatDialog para levantar un modal de confirmación. La petición HTTP se almacena en una variable y se pasa al observable para continuar o cancelar la petición.

Crear el diálogo de confirmación:

Para crear el diálogo de confirmación, podemos generar un nuevo componente llamado «confirmation-dialog». Para ello, podemos utilizar el siguiente comando:

ng generate component confirmation-dialog

En el archivo «confirmation-dialog.component.ts», agregamos el siguiente código:

import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-confirmation-dialog',
  templateUrl: './confirmation-dialog.component.html',
  styleUrls: ['./confirmation-dialog.component.css']
})
export class ConfirmationDialogComponent {

  constructor(
    public dialogRef: MatDialogRef<ConfirmationDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) {}

  onConfirm(): void {
    this.dialogRef.close(true);
  }

  onCancel(): void {
    this.dialogRef.close(false);
  }

}

En este componente, estamos importando las dependencias necesarias para utilizar el diálogo de Material Design, incluyendo MatDialogRef y MAT_DIALOG_DATA. Luego, definimos el componente y establecemos el selector y la plantilla del componente.

En el constructor, estamos inyectando MatDialogRef y MAT_DIALOG_DATA. MatDialogRef se utiliza para cerrar el diálogo, mientras que MAT_DIALOG_DATA se utiliza para recibir los datos que se le pasan al diálogo.

Luego, definimos dos funciones, onConfirm() y onCancel(), que se llaman cuando se hace clic en los botones del diálogo. onConfirm() devuelve true si se hace clic en el botón OK, mientras que onCancel() devuelve false si se hace clic en el botón Cancelar.

Por último, para que el interceptor funcione correctamente, debemos agregarlo al arreglo de interceptors en el módulo de nuestra aplicación. Para ello, abrimos el archivo app.module.ts y agregamos nuestro interceptor en el arreglo providers de la siguiente manera:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ConfirmationInterceptor } from './interceptors/confirmation.interceptor';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: ConfirmationInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

En este ejemplo, estamos agregando el interceptor ConfirmationInterceptor en el array de providers y estableciendo su uso como interceptor HTTP.

¡Listo! Ahora nuestro interceptor está listo para interceptar todas las solicitudes HTTP y mostrar un modal de confirmación antes de continuar con la solicitud. De esta manera, podemos asegurarnos de que los usuarios confirmen su acción antes de realizar cualquier cambio en nuestra aplicación.

En resumen, un interceptor en Angular es una función que se ejecuta antes o después de realizar una solicitud HTTP. Nos permite agregar, eliminar o modificar la información de la solicitud antes de enviarla al servidor. En este caso, hemos creado un interceptor que intercepta todas las solicitudes HTTP y muestra un modal de confirmación antes de continuar con la solicitud.