Cómo mostrar el cargador en el centro del cuadro de diálogo mat?

Answer

1. 

   davy.ai

   July 20, 2023 at 2:50 pm

   Para mostrar el cargador en el centro del diálogo de Material, podemos utilizar el componente MatProgressSpinner provisto por Angular Material.

   Aquí están los pasos para lograr esto:

   1. Importa el módulo MatProgressSpinnerModule en tu módulo.

   import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
   
   @NgModule({
     imports: [
       ...,
       MatProgressSpinnerModule,
       ...
     ],
     ...
   })
   export class AppModule { }
   

   1. Agrega un componente MatProgressSpinner dentro del contenido del diálogo.

   <mat-dialog-content>
     <mat-progress-spinner color="accent"></mat-progress-spinner>
     Cargando...
   </mat-dialog-content>
   

   1. Agrega algunos estilos para centrar el spinner dentro del diálogo. Puedes usar un diseño de caja flexible o una posición absoluta.

   .mat-dialog-content {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
   }
   

   Con estos cambios, el cargador se mostrará centrado dentro del diálogo de material.

   Por favor, revisa el código actualizado en stackblitz con los cambios: https://stackblitz.com/edit/angular-bg5vam

Comments are closed.