Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
    Yuvraj Chauhan
    @mnesser Are you using spinner at multiple places in your project?
    @vdiaz1130 I am already working on that part, in next version it will be available. It will also reduce the overall bundled size as well.
    @SenAlexandru Are you getting any error?
    @Napster2210 nope. it just doesn't show on chrome (works on edge)

    @Napster2210 - The NgxSpinnerModule is imported in app.module. Also the schemas: [CUSTOM_ELEMENTS_SCHEMA], is set, while in App.component I have the following code <router-outlet></router-outlet>

    <ngx-spinner bdColor="rgba(51, 51, 51, 0.8)" size="large" color="#ADFF2F" type="ball-clip-rotate-multiple">

    Yuvraj Chauhan
    @SenAlexandru Where were you called show() method of spinner?
    @Napster2210 in a service. showSpinner() {
    constructor(public _notification: MatSnackBar, private _spinner: NgxSpinnerService, private _settings: UserSettingService)
    @Napster2210 is there any different config I have to make for v9? This used to work fine on v8
    Yuvraj Chauhan
    @SenAlexandru No, there is no different config required, which version of Angular you're using?
    @Napster2210 "@angular/animations": "9.0.6",
    "@angular/cdk": "9.1.2",
    "@angular/common": "9.0.6",
    "@angular/compiler": "9.0.6",
    "@angular/core": "9.0.6",
    "@angular/forms": "9.0.6",
    "@angular/material": "9.1.2",
    "@angular/material-moment-adapter": "9.1.2",
    "@angular/platform-browser": "9.0.6",
    "@angular/platform-browser-dynamic": "9.0.6",
    "@angular/platform-server": "9.0.6",
    "@angular/router": "9.0.6",
    "@angular/service-worker": "9.0.6",
    "@ngneat/until-destroy": "^7.1.1",
    "@ngrx/store": "9.0.0",
    "@nguniversal/module-map-ngfactory-loader": "8.2.6",
    "@types/file-saver": "2.0.1",
    "ang-jsoneditor": "1.9.1",
    "aspnet-prerendering": "3.0.1",
    "bootstrap": "4.4.1",
    "core-js": "3.6.4",
    "file-saver": "2.0.2",
    "jquery": "3.4.1",
    "jsoneditor": "8.6.1",
    "jwt-decode": "2.2.0",
    "mat-select-filter": "2.3.6",
    "moment": "2.24.0",
    "ngx-image-compress": "8.0.4",
    "ngx-spinner": "^9.0.0",
    "popper.js": "1.16.1",
    "rxjs": "6.5.4",
    "saturn-datepicker": "8.0.5",
    "tslib": "^1.11.1",
    "xlsx": "0.15.5",
    "zone.js": "~0.10.2"
    Yuvraj Chauhan
    @SenAlexandru Let me check.
    @Napster2210 Sure, thanks a lot for taking the time to help
    Yes, Use multiple ngx-spinner by name pr page.
    @Napster2210 I've finally had it working. An old function called both spinner.hide() then spinner.show(). Previously it worked (v7.1.0), but on v9 it didn't. After removing the spinner.hide() call it worked fine. Thanks again
    Yuvraj Chauhan
    @SenAlexandru Cool
    @/all Deployed new version(v9.0.1) with one minor fix mentioned by @reinaldorauch
    Yuvraj Chauhan
    @/all Updated all Stackblitz demos to latest dependencies.
    @mnesser You can create one global configuration object in your global constant file and use that wherever you call ngx-spinner.
    Hello.Angular version is 8. I get error using ngxspinner.error is NullInjectorError: StaticInjectorError(eo)[vE -> t]:.Does not get same error on angular 7.But only on angular 8.
    Hello there. Is there a way to use a value from my styles.scss for the "color" option? I can't seem to find a way to achieve this. Any help is appreciated.
    Yuvraj Chauhan
    @Ilkin_Hamid_twitter Which version of angular you're using?
    I made some progress. What i really want to achieve is, to use an scss variable either in my .ts file or in my .html file. Is such a thing possible?
    Yuvraj Chauhan
    @iron2414 Let me try first.
    Yuvraj Chauhan
    @iron2414 I think you can use scss variable in your component style file using "@import"
    @Napster2210 Hi. version is Angular CLI: 8.3.25.But spinner version is 9.I followed all settings.But same error.
    Yuvraj Chauhan
    @Ilkin_Hamid_twitter Can you try version "8.1.0" of ngx-spinner?
    how to hide ngx-spinner during an exception..
    Yuvraj Chauhan
    You can call hide() in catch block where you handle your exception.
    Correct but in the respective angular application, global error handling class used to handle all exception in one place instead of writing catch block for each function.
    Yuvraj Chauhan
    Can you handle hide() in that global catch block?
    I have a angular ui which has 3 components , i used the ngx-serve in one of the component but the entire page gets stopped and comes as getting loaded
    i did use [fullScreen]="false" but no luck
    The hierarchy in my application is :
    App Compoent->Chart Component:->(Request component,StatusComponent,Sample Component) now i used the ngx-spinner in the request component but when i load the application the entire page gets freez and load instead of just the single component request component , can you help
    i am using angular 8
    Yuvraj Chauhan
    @sumit06122_twitter You have set position: relative css property to the parent DOM element of ngx-spinner
    to set*
    @MarciaTobias I've to check NX Console first. I've never used that before.
    Hi guys, good afternoon
    I've installed ngx-spinner today, but it's not showing up
    I would appreciate it if someone could lend a hand
    I imported and exported NgxSpinnerModule on a Shared module
    I also injected NgxSpinnerService on the component that I want to use it

    I used the code below, on my component's template

    <ngx-spinner bdColor="rgba(51,51,51,0.8)" size="medium" color="#fff" type="ball-scale-multiple" >
    <p style="font-size: 20px; color: white">Loading...</p>

    And used the methods show and hide on the component method I want to use it

    my package.json file

    "name": "projetobase",
    "version": "0.0.0",
    "scripts": {
    "ng": "ng",
    "start": "ng serve ",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
    "private": true,
    "dependencies": {
    "@angular/animations": "^8.2.3",
    "@angular/cdk": "^8.1.3",
    "@angular/common": "^8.2.14",
    "@angular/compiler": "~8.2.3",
    "@angular/core": "^8.2.14",
    "@angular/forms": "~8.2.3",
    "@angular/material": "^8.1.3",
    "@angular/platform-browser": "~8.2.3",
    "@angular/platform-browser-dynamic": "~8.2.3",
    "@angular/router": "~8.2.3",
    "@ng-bootstrap/ng-bootstrap": "^5.1.1",
    "@ngrx/devtools": "^1.4.0",
    "@ngrx/store": "^8.6.0",
    "@ngrx/store-devtools": "^8.6.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@sweetalert2/theme-dark": "^3.1.4",
    "angular-hammer": "^2.2.0",
    "angular-popper": "^2.0.1",
    "angular2-text-mask": "^9.0.0",
    "angular2-toaster": "^8.0.0",
    "bootstrap": "^4.3.1",
    "chart.js": "^2.8.0",
    "compass-mixins": "^0.12.10",
    "core-js": "^2.5.4",
    "file-saver": "^2.0.2",
    "highcharts": "^7.2.0",
    "jquery": "^3.4.1",
    "moment": "^2.25.3",
    "ng2-charts": "^2.3.0",
    "ngx-bootstrap": "^5.1.2",
    "ngx-cookie-service": "^2.2.0",
    "ngx-mask": "^8.1.5",
    "ngx-material-timepicker": "^5.5.1",
    "ngx-spinner": "^9.0.2",
    "ngx-toastr": "^10.1.0",
    "ngx-uploader": "^7.1.0",
    "popper.js": "^1.15.0",
    "rxjs": "~6.5.2",
    "sweetalert2": "^8.19.0",
    "tslib": "^1.9.0",
    "vanilla-text-mask": "^5.1.1",
    "xlsx": "^0.15.5",
    "zone.js": "~0.9.1"
    "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.23",
    "@angular/cli": "~8.3.0",
    "@angular/compiler-cli": "~8.2.3",
    "@angular/language-service": "~8.2.3",
    "@fortawesome/fontawesome-free": "^5.10.2",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.5.3"


    I have a angular ui which has 3 components , i used the ngx-serve in one of the component but the entire page gets stopped and comes as getting loaded
    i did use [fullScreen]="false" but no luck

    i am also facing this issue

    could you help on this to not loading on entire page
    i want to load this spinner in card level, not on entire page
    this.spinner.show('mySpinner', {
    type: "ball-clip-rotate-pulse",
    size: "medium",
    bdColor: "rgba(0, 0, 0, 0.5)",
    color: "white",