Angular 7 - ngx-spinner covering the whole page

Question

I have implemented ngx-spinner in my angular 7 page and set the fullscreen to false as I don't want the header to be covered by the background color of the spinner. It still covers the whole page while rendering. Not sure what the problem is.

Following is the link that I referred to

https://napster2210.github.io/ngx-spinner/

.alert {
    margin-top: 10px;
    height: 500x;
    position: relative;
    width: 100%;
    /* padding: 15px; */
    bottom: 0%;
    border: 1px solid transparent;
    border-radius: 4px;
    float: left;
}

.alert-danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}

table {
    border-collapse: collapse;
}

.spacing {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

.k-tabstrip > .k-content.k-state-active {
    display: none !important;
}

<div style="overflow-x: hidden; overflow-y: hidden;">
  <ngx-spinner bdOpacity=0.9 bdColor="#fff" size="medium" color="grey" type="ball-spin" fullScreen="false">
    <p style="color: white"> Loading... </p>
  </ngx-spinner>
  <div class="form-group row col-md-12" style="margin-top:30px">
    <div class="col-md-1">
      <label for="inputFax" class="col-form-label" style="font-weight: bold;">Eval Date</label>
      <kendo-datepicker style="width: 100% ;float: left;" [format]="'MMMM yyyy'" [topView]="'decade'"
        [bottomView]="'year'" [(ngModel)]="evalDate" (valueChange)="evalDateChanged($event)">
      </kendo-datepicker>
    </div>

    <div class="col-md-2" style="padding-left: 10px; width: 100%"><a class="btn btn-primary "
        (click)="downloadFundAllocationDetails()" [attr.href]="Url">Export To
        EXCEL<i title="PDF" class="fa fa-file-excel-o"></i> </a></div>
  </div>
  <div class="form-group row">
    <div class="panel panel-default col-md-12  ">
      <div *ngIf="AllocationDetails && AllocationDetails.ManagerAllocations" class="panel-body">
        <div id="grid-wrapper" [style.height.px]="GridHeight()" [style.width.%]="100" style="float: left;">
          <span style="text-decoration: underline; cursor: pointer;padding-right: 10px;"><a (click)="expandAll()">Expand
              All</a></span>
          <span style="text-decoration: underline; cursor: pointer;"><a (click)="collapseAll()">Collapse
              All</a></span>
          <ag-grid-angular #agGrid class="ag-theme-balham" [gridOptions]="GridOptions" style="width: 100%; height: 100%"
            [columnDefs]="ColumnDefs" [rowData]="AllocationDetails.ManagerAllocations" rowHeight="30" headerHeight="30"
            rowSelection="single" [pinnedBottomRowData]="pinnedBottomRowData"
            [frameworkComponents]="frameworkComponents">
          </ag-grid-angular>
        </div>

      </div>
    </div>
  </div>

  <div class="form-group row">
    <div class="panel panel-default col-md-12">
      <div style="height: 100%; width: 100%;" *ngIf="AllocationDetails && AllocationDetails.MissingProducts"
        class="alert alert-danger col-md-5">
        <p><strong>The investments made in the following products are not included in this report:</strong></p>
        <table>
          <ng-container *ngFor="let group of AllocationDetails.MissingProducts">
            <tr>
              <th> {{group[0].ProductType}}</th>
            </tr>
            <tr *ngFor="let post of group">
              <td> {{ post.ProductName  }} </td>
            </tr>
            <tr>
              <td class="spacing"></td>
            </tr>
          </ng-container>
        </table>
      </div>
      <div style="height: 100%; width: 100%; float:left;" *ngIf="AllocationDetails && AllocationDetails.ChartData"
        class="col-md-7">
        <app-pie-chart [series]="allocation_series"></app-pie-chart>
      </div>
    </div>
  </div>
</div>

Answer 1

Wrap it in a div with relative position if you want it to fill the container it's in:

<div style="position: relative">
  <ngx-spinner
      bdOpacity = 0.9
      bdColor = "#f4f4f9"
      size = "medium"
      color = "#1010ee"
      type = "ball-clip-rotate"
      [fullScreen] = "false">
  </ngx-spinner>
</div>

Answer 2

In your case you forgot the square brackets. You have to do it like this:

<ngx-spinner bdOpacity=0.9 bdColor="#fff" size="medium" color="grey" type="ball-spin" [fullScreen]="false">
    <p style="color: white"> Loading... </p>
</ngx-spinner>