customized material spinner not visble

Question

I have angular 11 application. And I have a spinner that has to be visible when data will be loaded from the backend. So when the user press the fa-icon. The fa-icon is not visible during the moment that the data is coming back from the server. But the problem is that the spinner is not visible.

So this is the customized compont for spinner:

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>
  <ng-template #progressSpinner>
    <mat-progress-spinner
      [diameter]="diameter"
      [mode]="mode"
      [color]="color"
      [strokeWidth]="strokeWidth"
      [value]="value"
    >
    </mat-progress-spinner>
  </ng-template>
</ng-template>

and 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;
}

and the component where I inject the spinner:

<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>

and I already added

MatProgressSpinnerModule

in app.module.

So my question is how to show the spinner?

Thank you

So for example in the mat-spinner-overlay. when I put a breakpoint on this line:

ngOnInit(): void {}

it hits that line.

But the spinner is not visible

I declared the customized spinner here:

@NgModule({
  declarations: [CustomElementDirective,
     WidgetEditorDirective,
      MatSpinnerOverlayComponent],
  imports: [
    CommonModule,
    FontAwesomeModule,
    RouterModule,
    MatProgressSpinnerModule,
  ],
  exports: [CustomElementDirective, WidgetEditorDirective, FontAwesomeModule, MatSpinnerOverlayComponent]
})
export class SharedModule { }

and the sharedModule is declared in the app.module

and this is the selector:

 selector: 'app-mat-spinner-overlay'

Oh, 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>
</ng-template>

I only see HELLO1 not the other hello's

Answer 1

ohhh,

Just removed the inline style:

   <app-mat-spinner-overlay *ngIf="isLoading"></app-mat-spinner-overlay>

Answer 2

Just to confirm, are you using the right selector for your custom spinner inside your template? I can't see it anywhere in your code.

Also, when you check your browser console, do you see any error there? This might help with troubleshooting.

Let's know what works for you.