Having an angular 11 application with a spinner that should be visible during data loading from the backend. However, when the fa-icon is pressed by the user, it becomes invisible while waiting for the server response. The issue arises when the spinner itself doesn't show up.
The customized component for the spinner is as follows:
export class MatSpinnerOverlayComponent implements OnInit {
constructor() { }
@Input() value : number = 100;
@Input() diameter: number = 100;
@Input() mode : string ="indeterminate";
@Input() strokeWidth : number = 10;
@Input() overlay: boolean = false;
@Input() color: string = "primary";
ngOnInit(): void {}
}
Template:
<ng-container *ngIf="overlay; else progressSpinner">
<div class="overlay">
<div class="center">
<ng-template [ngTemplateOutlet]="progressSpinner"></ng-template>
</div>
</div>
</ng-container>
<ng-template #progressSpinner>
<mat-progress-spinner
[diameter]="diameter"
[mode]="mode"
[color]="color"
[strokeWidth]="strokeWidth"
[value]="value"
>
</mat-progress-spinner>
</ng-template>
CSS:
.center {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
:host ::ng-deep .track circle{
stroke-opacity: 0.3 !important;
}
.overlay {
height: 100vh;
width: 100%;
background-color: rgba(94, 11, 11, 0.286);
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
The component where the spinner is injected:
<button *ngIf= "!isLoading"
(click)="createChartFromMap(selectedSensor.sensor.charts[0],selectedSensor.properties['key'],selectedSensor.properties['name'] )"
class="ml-auto unstyled-button" [disabled]="(mapRegistryService.$blockButtonGraph | async)" >
<fa-icon [icon]="selectedSensor.sensor.icon" [styles]="{'color': '#BF0404'}" size="lg" class="menu-list-item">
</fa-icon>
</button>
<app-mat-spinner-overlay *ngIf="isLoading" style="margin:0 auto;" mode="determinate" strokeWidth="20" value="100" diameter="70" class="mat-spinner-color"></app-mat-spinner-overlay>
I have already added
MatProgressSpinnerModule
in app.module.
How can I make sure the spinner shows up?
Thank you
In the mat-spinner-overlay example, even though I set a breakpoint on this line:
ngOnInit(): void {}
It gets triggered, but the spinner remains invisible.
I defined the customized spinner here:
@NgModule({
declarations: [CustomElementDirective,
WidgetEditorDirective,
MatSpinnerOverlayComponent],
imports: [
CommonModule,
FontAwesomeModule,
RouterModule,
MatProgressSpinnerModule,
],
exports: [CustomElementDirective, WidgetEditorDirective, FontAwesomeModule, MatSpinnerOverlayComponent]
})
export class SharedModule { }
The SharedModule is declared in the app.module
and this is the selector:
selector: 'app-mat-spinner-overlay'
If I do this:
HELLO1
<ng-container *ngIf="overlay; else progressSpinner">
<div class="overlay">
<div class="center">
HELLO2
<ng-template [ngTemplateOutlet]="progressSpinner"></ng-template>
</div>
</div>
</ng-container>
<ng-template #progressSpinner>
<ng-template #progressSpinner>
<mat-progress-spinner
[diameter]="diameter"
[mode]="mode"
[color]="color"
[strokeWidth]="strokeWidth"
[value]="value"
>
</mat-progress-spinner>
HELLO3
</ng-template>
</template>
I only see HELLO1 not the other hello's