Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    msunkari
    @msunkari
    Hi team we have just updated our project to angular 8 and installed ngx-spinner 8.1.2, the spinner is coming but we are able to interact with the screen in the backdrop even when the spinner is still loading, eg the spinner is loading and in the background i can see tool tip on hover of an element.. can u please suggest us how we can disable the interaction with the backdrop
    msunkari
    @msunkari
    Also in v8.1.0 we are unable to apply custom template is that option not available in v8?
    Yuvraj Chauhan
    @Napster2210
    @msunkari Currently that is not available in V8 but it'll be.
    @wagneribanez2 Can you please create a sample Slackblitz so I can you through code.
    wagneribanez2
    @wagneribanez2
    Hi @Napster2210 I had to use another solution. Thanks for your help anyway
    Yuvraj Chauhan
    @Napster2210
    @wagneribanez2 I think the issue was with version of ngx-spinner. I saw you're using angular version 8, in that case you need to use ngx-spinner version 8 as well. By the way you find another solution great! 👍
    venkatramarajup
    @venkatramarajup
    ngxspinner.hide() is not working in angular v9 can any one help me out??
    venkatramarajup
    @venkatramarajup
    i wrote a .show() in one method and .hide() in one method , but in .ts file it will call both the methods , while doing that .show() is working fine but .hide() is not working the spinner is spinning continuously until we press the button . But i want it to hide automatically , can anyone help me out??
    Yuvraj Chauhan
    @Napster2210
    @venkatramarajup Can you create a sample using stackblitz or codepen? So I can help you with the issue.
    venkatramarajup
    @venkatramarajup
    @Napster2210 hey sorry i am unable to create it , and .hide() function is not working in angular 9
    venkatramarajup
    @venkatramarajup
    @Napster2210 if we place spinner.hide() in subscribe , will it work? and spinner.show() before subscribing? my angular version is 9
    Yuvraj Chauhan
    @Napster2210
    Hello guys!!!! Latest version v10.0.0 is now available.
    Yuvraj Chauhan
    @Napster2210
    10.0.1 is released with minor dependency warning fix.
    Björn Kimminich
    @bkimminich
    Hi all! I'm happily using ngx-spinner in the OWASP Juice Shop (https://owasp-juice.shop) project for a long time to make the wait time on a slow loading component (https://github.com/bkimminich/juice-shop/blob/master/frontend/src/app/score-board/score-board.component.ts) easier to bear. Work fine for the ngOnInit case of the entire component, because there I can hide the spinner at the end of the inner most subscribe() function. All good. Now: There are many filter options on the page and some take quite a long time until the page fully shows the updates. There I've got problems, because I can't find a proper place to hide the spinner after showing it e.g. when the user clicks one of the filter buttons. Hints are welcome. Demo 1: Go to http://preview.owasp-juice.shop/#/score-board (spinner working on initialization) - Demo 2: On the page click any of the two "Hide/Show all" buttons to see how rendering takes long on "Show all" without a spinner. There I'd really like to add one but can't find the right hook to hide it. Any hint or help welcome! (If you send a PR with a working solution, I'll happily send you a Juice Shop sticker pack! :smile:)
    Yuvraj Chauhan
    @Napster2210
    @bkimminich I'll try your code and will let you know if I get something which can helpful for you.
    Björn Kimminich
    @bkimminich
    😃👍
    Rajitha Upasanka Kithuldeniya
    @Kithuldeniya
    As in the screen shot ngx-spinner takes considerable weight in bundle file, can we reduce that size ?
    image.png
    Yuvraj Chauhan
    @Napster2210
    @Kithuldeniya Currently it's taking large css file that's why the overall bundle size
    I' m working on that part so there will be a lighter version in future.
    saboehnke
    @saboehnke
    Hello @Napster2210 . I am using angular 10 and I have attempted to install this package many times. Every time I get an error "NGCC failed" when I try to serve up the application. Removing the package fixes the issue. Have you seen this before?
    Yuvraj Chauhan
    @Napster2210
    Which version of ngx-spinner are you using?
    saboehnke
    @saboehnke
    The latest version. I'm just running 'npm install ngx-spinner --save'.
    Yuvraj Chauhan
    @Napster2210
    @saboehnke Are you using ivy for your application?
    If yes then uninstall ngx-spinner first paste below script to your package.json:
      "scripts": {
        "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
      }
    }
    Then install ngx-spinner and check again
    saboehnke
    @saboehnke
    That fixed the issue. Thanks @Napster2210
    camel99
    @camel99

    hi guys, any idea why spinner is not being hide on finalize?
    a.component.ts

      ngAfterViewInit() {
        this.subscriptions.add(
          this.organizationsService.organizations$
            .pipe(
              tap(() => {
                this.spinnerService.showLoader();
              }),
              finalize(() => {
                this.spinnerService.hideLoader();
              }),
              takeUntil(this.destroySubject))
            .subscribe(response => {
              this.cachedFacts = this.cachedFacts.concat(response);
              if (!this.searchService.search.value.length) {
                this.dataSource.data = this.cachedFacts as IOrganizations[];
                this.dataSource.sort = this.sort;
              } else {
                this.dataSource.data = response as IOrganizations[];
                this.cachedFacts = [];
              }
              this.filterSelectObj.filter((o) => {
                o.options = this.getFilterObject(this.dataSource.data, o.columnProp);
              });
            }, (error) => {
              this.errorService.handleError(error);
            })
        );
    
      }

    spinner.service.ts

    import { Injectable } from '@angular/core';
    import { BehaviorSubject } from 'rxjs';
    import { NgxSpinnerService } from 'ngx-spinner';
    
    @Injectable()
    export class SpinnerService {
      constructor(private spinnerService: NgxSpinnerService) { }
    
      public showLoaderSubject = new BehaviorSubject<boolean>(false);
    
      showLoader() {
        // this.showLoaderSubject.next(true);
        this.spinnerService.show();
      }
      hideLoader() {
        // this.showLoaderSubject.next(false);
        this.spinnerService.hide();
      }
    }

    spinner.module.ts

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { SpinnerComponent } from './spinner.component';
    import { NgxSpinnerModule, NgxSpinnerService } from 'ngx-spinner';
    import { SpinnerService } from '@shared/services/spinner.service';
    
    @NgModule({
      imports: [
        CommonModule,
        NgxSpinnerModule
      ],
      declarations: [SpinnerComponent],
      exports: [SpinnerComponent],
      providers: [SpinnerService, NgxSpinnerService]
    })
    export class SpinnerModule { }
    camel99
    @camel99
    sry, actually question is why is not shown. if I remove finalize then is shown but obviously never hides
    Burhan
    @ibuli
    Hi
    is there any way to overwrite the default classes using custom css?
    captured.gif
    Also, I'm not sure if anybody has realized but there's this weird animation issue.
    @Napster2210
    Burhan
    @ibuli
    The same happens on the demo page too
    Yuvraj Chauhan
    @Napster2210
    @ibuli I will look into it, thanx
    Burhan
    @ibuli
    Great thanks @Napster2210 , also please help me if I can overwrite the CSS in any way.
    In the mobile view, the loading text overlaps the loader and doesn't look good.
    Burhan
    @ibuli
    image.png
    Screenshot for the same if needed
    Burhan
    @ibuli
    That's fine I resolved the custom css point using ::ng-deep
    Yuvraj Chauhan
    @Napster2210
    Great! @ibuli
    Hello @all
    Few things are affected to me due to this pandemic situation, I didn't spend my time for this package but I'll try my best to keep updating this package and provide you guys new features soon. Thanx a lot for your support. 😊
    Tagi Asadullazadeh
    @asadullazadeh
    Hi everyone,
    I use ngx-spinner in my angular universal application.
    When I view page-source I see all ngx-spinner classes to my head section
    Tagi Asadullazadeh
    @asadullazadeh
    I think it's not practice thing. How can I remove from here?
    image.png