Title: Necesito Ayuda ¿Como agregar Spinner a una función que recorre la tabla para exportar datos en excel? Angular material
Tags: angular;typescript;spinner
Question: Necesito agregar spinner y quitarlo cuando termine de ejecutar la función "exportTable" Como se muestra en el ejemplo:
Export(){
this.spinner.show();
this.ExpTable.exportTable('xlsx', {fileName:'Cat_claves_presup', sheet: 'Hoja1', Props: {Author: 'Administrador'}});
this.spinner.hide();
<button mat-button (click)="Export()"&gt;
<mat-icon color="primary"&gt;unarchive</mat-icon&gt;Exportar
</button&gt;
<button mat-button&gt;
<mat-form-field&gt;
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filtrar por"&gt;
</mat-form-field&gt;
</button&gt;
</mat-toolbar&gt;
<div&gt;
<mat-table matTableExporter  #exporter="matTableExporter" [dataSource]="dataSource" matSort style="overflow-x: scroll !important; display: grid" class="scroll" hiddenColumns="[1,3,4]"&gt;
<ng-container matColumnDef="id_clav_p"&gt;
<mat-header-cell *matHeaderCellDef mat-sort-header class="columna1"&gt; No. </mat-header-cell&gt;
<mat-cell *matCellDef="let row" class="columna1" &gt; {{row.id_clav_p}} </mat-cell&gt;
</ng-container&gt;
La problemática es que no se muestra el Spinner y se ejecuta la función la cual recorre el mat-table para exportar los datos
Comment: Creo que no es muy claro lo que deseas hacer, amigo. ¿Podrías agregar más detalles a tu post? ¿Qué has intentando? ¿Cuáles son los resultados que has obtenido?¿Y cuál es el resultado que esperabas? ¿Te muestra algún error?...

Comment: La problemática es que no se muestra el Spinner () es decir el componente que muestra la espera del proceso y simplemente ejecuta la función la cual recorre el mat-table para exportar los datos. he intentado agregar callbacks, subscribe y hasta setTimeout pero no consigo que primero muestre el spinner luego ejecute el codigo que exporta y finalmente oculte el spinner.

Here is the accepted answer: Te sugiero declarar una variable privada Tipo Boleano que valide tu carga por ejemplo:
Export(){
this.varSpinner= true;
this.ExpTable.exportTable('xlsx', {fileName:'Cat_claves_presup', sheet: 'Hoja1', Props: {Author: 'Administrador'}});
this.varSpinner = false;}
y puedes utilizar del lado de HTML el Icono de Fa-spinner algo como esto quedaría:
<button mat-button (click)="Export()" [disabled]="varSpinner"&gt;
<mat-icon color="primary"&gt;unarchive</mat-icon&gt;Exportar
<i [ngClass]="{'fa-spinner fa-spin': varSpinner}" class="fa"&gt;</i&gt;
</button&gt;
<button mat-button&gt;
<mat-form-field&gt;
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filtrar por"&gt;
</mat-form-field&gt;
</button&gt;
</mat-toolbar&gt;
<div&gt;
<mat-table matTableExporter  #exporter="matTableExporter" [dataSource]="dataSource" matSort style="overflow-x: scroll !important; display: grid" class="scroll" hiddenColumns="[1,3,4]"&gt;
<ng-container matColumnDef="id_clav_p"&gt;
<mat-header-cell *matHeaderCellDef mat-sort-header class="columna1"&gt; No. </mat-header-cell&gt;
<mat-cell *matCellDef="let row" class="columna1" &gt; {{row.id_clav_p}} </mat-cell&gt;
</ng-container&gt;
Agregué la directiva [disable], para que desactive tu botón de exportación mientras se carga el reporte, para evitar que el usuario bombardee el botón y la [ngClass] te permitirá ver lo del spinner que buscas. Espero te sirva.
Nota: cabe mencionar que tu variable privada "varSpinner" debes declararla como False:
private varSpinner = false;


{'source': 'StackExchangeDataset', 'subset': 'es.stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2019:00:09/10/19', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<angular><typescript><spinner>', 'Title': 'Necesito Ayuda ¿Como agregar Spinner a una función que recorre la tabla para exportar datos en excel? Angular material', 'ViewCount': 300, 'id': 291948, 'user_AboutMe': None, 'user_AccountId': 16671435.0, 'user_DisplayName': 'JL BS', 'user_Reputation': 3.0, 'user_Views': 2.0, 'user_id': 140364.0}}