Can't configure ngx-ui-loader from app.module.ts file

Question

I am using the ngx ui loader for my angular 7 project.

In the app.module.ts file, I have imported the ngx-ui-loader package like this:-

import { NgxUiLoaderModule, NgxUiLoaderHttpModule, NgxUiLoaderConfig, SPINNER, POSITION, PB_DIRECTION } from  'ngx-ui-loader';

Then I created a constant like this to define the configuration parameters:-

const ngxUiLoaderConfig: NgxUiLoaderConfig = {
  bgsColor: 'red',
  bgsPosition: POSITION.bottomCenter,
  bgsSize: 40,
  bgsType: SPINNER.rectangleBounce,
  pbDirection: PB_DIRECTION.leftToRight, // progress bar direction
  pbThickness: 5, // progress bar thickness
};

Then added the NgxUiLoaderModule.forRoot(ngxUiLoaderConfig) in the imports array of the @NgModule

In the app.component.html file, I have added the <ngx-ui-loader></ngx-ui-loader> tag just above the <router-outlet></router-outlet> tag.

In the app.component.ts file, I kept the following code

import { NgxUiLoaderService } from 'ngx-ui-loader';

export class AppComponent implements OnInit{
  title = 'medico';
  constructor(private ngxService: NgxUiLoaderService) { }
  ngOnInit() {
    this.ngxService.start(); // start foreground spinner of the master loader with 'default' taskId
    // Stop the foreground loading after 5s
    setTimeout(() => {
      this.ngxService.stop(); // stop foreground spinner of the master loader with 'default' taskId
    }, 300);
  }
}

When I am running the page, I can see the loader. The issue is, even after changing the configuration data in the app.module.ts, the loader property doesn't change.

What am I doing wrong?

Note: Please don't give suggestions like "why don't you use other loader like http-loader, etc". The question is about why the ngx ui loader isn't working as expected.

Answer 1

You need to change all instances of bgs to fgs, so bgsColor should be fgsColor.

By default, the only spinner viewable appears to be the forground spinner and the progress bar.

Hope that helps