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>