Just wanted to say thanks! Great component - does what I need with no overkill...

Chad

Hi,
I want to add a new property in order to make spinner circleSwish size tunable.

I forked your project and committed my changes but I can't build this module since some needed configuration files are missing.

So I want to ask you if you can add that files (eg. tsconfig, angular-cli.json and so on) or, at least, if could you build your project with my commit and you can update the build on the official npm repository.

here is the commit that should be merged:
LucaSarge4@d2947c7

Can we add delay for showing spinner? So we can only show spinner for expensive calls?
[delay]="500" or something like that?

I am getting Above Error While using ngx-loading, any one have any idea.

Thanks in advance

When onchange function called I say this.loading = 'true'; and when the switch case ends I say this.loading = 'false';. But it won't works till I gives timeout. Please suggest me some way.

I keep getting this error when trying to publish app using AOT. Has anyone else had this issue?

ERROR in ./$$_gendir/~/ngx-loading/src/ngx-loading.component.ngfactory.ts
Module parse failed: d:\a\1\s\Vacant2$$_gendir\node_modules\ngx-loading\src\ngx-loading.component.ngfactory.ts Unexpected token (13:29)
You may need an appropriate loader to handle this file type.
| import * as i2 from 'ngx-loading/src/ngx-loading.component';
| import * as i3 from 'ngx-loading/src/ngx-loading.service';
| const styles_LoadingComponent:any[] = ['.backdrop[_ngcontent-%COMP%] {\n z-index: 50;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgba(0, 0, 0, 0.3);\n }\n\n \n\n .spinner-three-bounce[_ngcontent-%COMP%] {\n width: 70px;\n text-align: center;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n height: 20px;\n margin: auto;\n z-index: 51;\n }\n\n .spinner-three-bounce[_ngcontent-%COMP%] > div[_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n background-color: #ffffff;\n\n border-radius: 100%;\n display: inline-block;\n -webkit-animation: sk-b...
| export const RenderType_LoadingComponent:i0.RendererType2 = i0.ɵcrt({encapsulation:0,
| styles:styles_LoadingComponent,data:{}});
@ ./$$_gendir/ClientApp/app/components/app/app.component.ngfactory.ts 9:0-108
@ ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts
@ ./ClientApp/boot.browser.ts

can we simply add <ngx-loading [show]="true"> in the index.html file?

Hi, backDrop rectangle not expanding on scrolled page size.

What is wrong?
When I try to use "loading"-component as documented, I get following error in MS Code: (angular 4.4.3)

Error: Template parse errors:
Can't bind to 'show' since it isn't a known property of 'ngx-loading'.

1. If 'ngx-loading' is an Angular component and it has 'show' input, then verify that it is part of this module.
2. If 'ngx-loading' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

<ngx-loading [ERROR ->][show]="loading" config="{ backdropBorderRadius: '14px' }">

Hi, it does not work for me. But I have a question.
I have the import in app.module, but the login I have in another module. I have to do the import also in login.module and the other modules where I use it?
I remove it from app.module?
I use lazy loading, is there a problem?

thanks

Would it be possible to add a Service that I can inject in any of my components. I would like to declare a global spinner (in the App component) with global configuration and simply call a spin() method from a Spinner Service.

The missing Service and option to change spinner size would be really awesome (that is mentioned in another open issue).

Thanks for the lib :)

Hi! Ho to use in this case?

<div *ngFor="let product of (products | async).items"
          class="product-container">

export class StoreFrontComponent implements OnInit {
  public products: Observable<ProductList>;

  constructor(private productsService: ProductsService,
              private shoppingCartService: ShoppingCartService) { }

  ngOnInit() {
    this.products = this.productsService.all()
  }

  public addProductToCart(product: Product): void {
    this.shoppingCartService.addItem(product, 1);
  }

  public removeProductFromCart(product: Product): void {
    this.shoppingCartService.addItem(product, -1);
  }

Could you please provide license information?
Thanks.

Hi,

Tx for this plugin, I like it !

I insert the loader like that, just before my container:

<ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px' }"></ngx-loading>

When the page is loading, it works great, but once I click on the pagination links for example, it

{{ loading }}
        <ngb-pagination [collectionSize]="tournaments?.meta?.total"
                        [(page)]="page" aria-label="Default pagination"
                        [pageSize]="tournaments?.meta?.per_page"
                        [maxSize]="5"
                        [rotate]="true"
                        (clic)="loading=true"
                        (pageChange)="pageChanged($event)"
                        size="lg"
                        class="d-flex justify-content-center"></ngb-pagination>

it doesn't show again.

I can see with the {{ loading }} that variable loading is changing.

Is there something else to do for it to refresh ???

Hi,

When I run the Google Lighthouse web performance analyzer, there're couple of improvement opportunities, which I believe to be related to style part of ngx-loading, as follow:

Would it be possible to externalize it and compress it, so it will pass this analysis ?

Thanks.

Thank you for nice component and it's easy to use.

Want to display it with different view and close it in another view after router resolver completes?

Thank you,

Hello guys,
there is a CSS issue regarding the backdrop
in the backdrop style the position style is absolute and in some cases this style cause the backdrop Div not to fill the height of the page and i think better to be set to Fixed rather than absolute and this will fix the issue

Animation types rectangleBounce and wanderingCubes not working. Is there some other setting that we need to do to get these to work?

Hello,
I'm setting the variable this.loading = false; but it is not working, the loading continues to be exported, what should I do besides set false to loading so that it stops being displayed?

if (confirm("Tem certeza que deseja excluir " + item.numFogo + " " + item.fabricante + " " + item.modelo + "?")) {
//setar true loadind
this.loading = true;
var index = this.rows.indexOf(item);
this.rows.splice(index, 1);
this.service
.delete(item.pneuId)
.subscribe(res => {
//setar false... loadind
this.loading = false;
alert("ok");
}, err => {
alert("Não foi possível deletar o item.");
this.rows.splice(index, 0, item);
this.loading = false;
});
}

I'm using ngx-loading and working very well. I wanna know if is possible add labels in black screen. Something like image below:

Stackoverflow question

I have tried and applied every dependencies as described at :- https://www.npmjs.com/package/ngx-loading

But i didn't understood what's with the CoreModule. i coudn't find that in my project or even in this git repository.

Do i have to do anything else than described at :- https://www.npmjs.com/package/ngx-loading.

Their is no error but it's not showing the animations while i hit the Login.
Please Help!!

Is there a way to change the sizes of the circle of the three bounce circle?

Hi @Zak-C Great job!

I'm facing an issue on Linux. After cloning your repo, the npm install command fails due to the COPY command used to copy the README.md file into the dist folder.

The error is located under the copyReadme npm script command. See next screenshot.

I will send a PR to fix it.

The library doesn't seem to be compatible with Angular 5.
Would that be possible to change that?
Thanks!

Firstly, thank you, this is a life saver!
Is it possible to set the loading configuration (animation) globally so that we don't need to pass it every time we insert the loading directive into a component?

The nature of it being positioned absolute means that if you scroll down, you will scroll under the loading indicator. I use these two global rules to make it super cool:

.backdrop {
    position: fixed !important;
}

.spinner-three-bounce {
    position: fixed !important;
}

Now the loading indicator always take up the entire screen and the bouncing dots stay in the middle. It looks super cool - you might want to at least consider that effect. I for one kind of expected it to work like that so others might too.

I have setup this loader products screen:

<ngx-loading [show]="productsLoading" [config]="loaderConfig"></ngx-loading>```

where

public loaderConfig:any = {
    fullScreenBackdrop: false
  };

Whereas in the app.module.ts,

@NgModule({
  imports: [
    LoadingModule.forRoot({
      animationType: ANIMATION_TYPES.threeBounce,
      backdropBackgroundColour: '#00000096',
      backdropBorderRadius: '4px',
      primaryColour: '#20a8d8',
      fullScreenBackdrop: true,
      secondaryColour: '#20a8d89c',
      tertiaryColour: '#ffffff'
    }),
  ]
})

Still on the product screen, I see a full screen loader when productsLoading=true

1. If 'ngx-loading' is an Angular component and it has 'show' input, then verify that it is part of this module.
2. If 'ngx-loading' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("editbutton]="true" [custombutton]="true" [fullscreenbutton]="true" color="darken">
   <ngx-loading [ERROR ->][show]="loading" [config]="{ backdropBorderRadius: '14px' }">

Hi

I tried to apply the overlay only on the element. But it's seems that the overlay is on the only, so on the full card ?

Do you know if it's possible or if that can be a feature to apply the overlay and loading only on one element HTML ?

Thank you in advance

Regards

I am trying to create a loading effect whenever I hit my service for which I am using ngx-loading module.

In my component I am adding this:

this.loading = true;
But I want to use this inside my service I am triggering my service from my component.ts like:

this.SvgService.test(u,user.view,user.rain_fall_type,user.years,user.districts);
And in my service I am using this:

public loading = false;
test(a,views,rain_fall_type,year,districts) {
let url = ${this.apiRoot}/rainfalls/test?views= + views +'&rain_fall_type='+rain_fall_type+'&year='+year;
console.log("true");
// title;
this.loading = true;
var title = rain_fall_type;
this.http.get(url).
subscribe(res => {
this.j = res;
this.loading = false;
if (districts == "All") {
this.map_districts(this.j)
} else {
this.map_bihar_vs_districts(districts)
}
}
);
}
This is not working how can I trigger loading inside my service.

Hi,
I'm currently trying to get my angular project to work with SSR. One of the modules that causes errors when used on the server is ngx-loading. I get several "Unexpected token export" and "Unexpected token import" errors. There is an issue regarding this problem at angular/angular-cli#7200. The verdict seems to be, that the modules causing the error have to be changed to conform to the angular package format. I'm not sure what that would mean for this package. It might be as simple as changing the tsconfig to compile to commonjs.

I would be nice to have an optional busy message that's shown as well.

Can't bind to 'show' since it isn't a known property of 'ngx-loading'.

1. If 'ngx-loading' is an Angular component and it has 'show' input, then verify that it is part of this module.
2. If 'ngx-loading' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("

"): ng:///HomePageModule/HomePage.html@9:15 'ngx-loading' is not a known element: 1. If 'ngx-loading' is an Angular component, then verify that it is part of this module. 2. If 'ngx-loading' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->] The world is your oyster.

"): ng:///HomePageModule/HomePage.html@9:2 Error: Template parse errors: Can't bind to 'show' since it isn't a known property of 'ngx-loading'. 1. If 'ngx-loading' is an Angular component and it has 'show' input, then verify that it is part of this module. 2. If 'ngx-loading' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" ][show]="loading"> The world is your oyster.

"): ng:///HomePageModule/HomePage.html@9:15 'ngx-loading' is not a known element: 1. If 'ngx-loading' is an Angular component, then verify that it is part of this module. 2. If 'ngx-loading' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->] The world is your oyster.

"): ng:///HomePageModule/HomePage.html@9:2 at syntaxError (compiler.js:466) at TemplateParser.parse (compiler.js:24329) at JitCompiler._parseTemplate (compiler.js:33757) at JitCompiler._compileTemplate (compiler.js:33732) at compiler.js:33634 at Set.forEach () at JitCompiler._compileComponents (compiler.js:33634) at compiler.js:33504 at Object.then (compiler.js:455) at JitCompiler._compileModuleAndComponents (compiler.js:33503) at syntaxError (compiler.js:466) at TemplateParser.parse (compiler.js:24329) at JitCompiler._parseTemplate (compiler.js:33757) at JitCompiler._compileTemplate (compiler.js:33732) at compiler.js:33634 at Set.forEach () at JitCompiler._compileComponents (compiler.js:33634) at compiler.js:33504 at Object.then (compiler.js:455) at JitCompiler._compileModuleAndComponents (compiler.js:33503) at c (polyfills.js:3) at c (polyfills.js:3) at polyfills.js:3 at t.invokeTask (polyfills.js:3) at Object.onInvokeTask (core.js:4620) at t.invokeTask (polyfills.js:3) at r.runTask (polyfills.js:3) at o (polyfills.js:3) at

CHECK THE CODE....
http://plnkr.co/edit/WAH1jTOQ4yVhCtoaboKY?p=catalogue

So I will stat by saying (and admitting) my css skills are not the best, so I am having trouble debugging the following issue.

Background: I have been using ngx-loading for the past 6 weeks and it works perfectly. However, as of today I started using leafletjs with the plugin ngx-leaflet.

Now this plugin works correctly within my application, and I have the following template that uses ngx-loading and ngx-leaflet:

<ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px' }"></ngx-loading>
<div class="row">
    <div class="col-sm-12" *ngFor="let key of keys">
            <!-- my looped code here -->
    </div>
<!-- code below added which causes problem -->
    <div class="col-sm-12">
        <div style="height: 600px;"
            leaflet
            [leafletLayersControl]="layersControl"
            [leafletOptions]="options">
        </div>
    </div>
<!-- code above added which causes problem -->
</div>

Now as you can see from the above commented code, I have added code to my template which in essence renders an interactive openstreetmap viewer in my browser, and when I now inititate ngx-loading, the animation no longer comes to the top of the page.

See Fig1 below that shows ngx-loading working, before I added leafletjs code.

See Fig2 below that shows ngx-leaflet working, before I calling ngx-loading.

See Fig3 below that shows that when ngx-loading is called with ngx-leaflet, the animation seems to be "stuck" underneath the rendered map, I am sure this is just a css setting, but I have tried to play around with the style editor in firefox to fix this issue, and I can't seem to get anywhere, are there any likely tags that I need to add or remove to either ngx-loading or ngx-leaflets css to fix this?

Hi,
I get this error when set the flag to trigger spinner in ngAfterViewInit:

core.es5.js:2925 Angular is running in the development mode. Call enableProdMode() to enable the production mode. ChartsComponent.html:25 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'true'. at viewDebugError (core.es5.js:8426) at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8404) at checkBindingNoChanges (core.es5.js:8568) at checkNoChangesNodeInline (core.es5.js:12440) at checkNoChangesNode (core.es5.js:12414) at debugCheckNoChangesNode (core.es5.js:13191) at debugCheckDirectivesFn (core.es5.js:13093) at Object.View_ChartsComponent_0._co [as updateDirectives] (ChartsComponent.html:25) at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13075) at checkNoChangesView (core.es5.js:12234) View_ChartsComponent_0 @ ChartsComponent.html:25 proxyClass @ compiler.es5.js:14971 webpackJsonp.../../../core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13415 webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1080 (anonymous) @ core.es5.js:4819 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:392 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:142 webpackJsonp.../../../core/@angular/core.es5.js.NgZone.runOutsideAngular @ core.es5.js:3844 webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.tick @ core.es5.js:4819 (anonymous) @ core.es5.js:4684 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:392 onInvoke @ core.es5.js:3890 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:142 webpackJsonp.../../../core/@angular/core.es5.js.NgZone.run @ core.es5.js:3821 next @ core.es5.js:4684 schedulerFn @ core.es5.js:3635 webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:238 webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:185 webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:125 webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89 webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55 webpackJsonp.../../../core/@angular/core.es5.js.EventEmitter.emit @ core.es5.js:3621 checkStable @ core.es5.js:3855 onHasTask @ core.es5.js:3903 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:445 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:465 webpackJsonp.../../../../zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:289 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:209 drainMicroTaskQueue @ zone.js:602 Promise resolved (async) scheduleMicroTask @ zone.js:585 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:414 onScheduleTask @ zone.js:301 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:405 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:236 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:256 scheduleResolveOrReject @ zone.js:842 resolvePromise @ zone.js:790 (anonymous) @ zone.js:717 webpackJsonpCallback @ bootstrap cf68f8416c278a5461b5:21 (anonymous) @ common.chunk.js:1 ChartsComponent.html:25 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 57, nodeDef: {…}, elDef: {…}, elView: {…}} View_ChartsComponent_0 @ ChartsComponent.html:25 proxyClass @ compiler.es5.js:14971 webpackJsonp.../../../core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13415 webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1085 (anonymous) @ core.es5.js:4819 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:392 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:142 webpackJsonp.../../../core/@angular/core.es5.js.NgZone.runOutsideAngular @ core.es5.js:3844 webpackJsonp.../../../core/@angular/core.es5.js.ApplicationRef_.tick @ core.es5.js:4819 (anonymous) @ core.es5.js:4684 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:392 onInvoke @ core.es5.js:3890 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:142 webpackJsonp.../../../core/@angular/core.es5.js.NgZone.run @ core.es5.js:3821 next @ core.es5.js:4684 schedulerFn @ core.es5.js:3635 webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:238 webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:185 webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:125 webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89 webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55 webpackJsonp.../../../core/@angular/core.es5.js.EventEmitter.emit @ core.es5.js:3621 checkStable @ core.es5.js:3855 onHasTask @ core.es5.js:3903 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:445 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:465 webpackJsonp.../../../../zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:289 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:209 drainMicroTaskQueue @ zone.js:602 Promise resolved (async) scheduleMicroTask @ zone.js:585 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:414 onScheduleTask @ zone.js:301 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:405 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:236 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:256 scheduleResolveOrReject @ zone.js:842 resolvePromise @ zone.js:790 (anonymous) @ zone.js:717 webpackJsonpCallback @ bootstrap cf68f8416c278a5461b5:21 (anonymous) @ common.chunk.js:1

Is there a way to add a div of text or image to the loader?

hello,

Getting Three bounce as rectangles not circle in angular 5.
"ngx-loading": "^1.0.14", (version)
in app.module
LoadingModule.forRoot({
animationType: ANIMATION_TYPES.threeBounce,
backdropBackgroundColour: 'rgba(0,0,0,0.1)',
backdropBorderRadius: '14px',
primaryColour: '#ff0000',
secondaryColour: '#ff0000',
tertiaryColour: '#ff0000'
})
is there any CSS or core module for circles ?

I haven't even tried toggling the loading bool as yet. I get the loading error with what I added below. If I remove the code below, the app comes up fine. Using Visual Studio i get the intelliSense enumerations on the ANIMATION_TYPES, so I know my paths are correct on the map statement. Thanks for the help.

systemjs.config.js:
map:
...
'ngx-loading': 'npm:ngx-loading/bundles/ngx-loading.umd.js',

app.module.ts:
import { LoadingModule, ANIMATION_TYPES } from 'ngx-loading';

@NgModule({
imports: [
AppRoutingModule,
LoadingModule.forRoot({
animationType: ANIMATION_TYPES.wanderingCubes,
backdropBackgroundColour: 'rgba(0,0,0,0.1)',
backdropBorderRadius: '4px',
primaryColour: '#ffffff',
secondaryColour: '#ffffff',
tertiaryColour: '#ffffff'
})

app.component:
public loading = false

app.component.html
<ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px' }">

Hi,

I'm trying to have multiple configurations that are selected runtime. Everything works OK, but I'd like to have the compiler complain if you later remove or change some configuration options. That is, I'm trying to do this:

import { ANIMATION_TYPES, ILoadingConfig } from 'ngx-loading'

And then later

mainOverlayConfig: ILoadingConfig = {
  animationType: ANIMATION_TYPES.threeBounce,
  backdropBackgroundColour: 'rgba(0, 0, 0, 0.1)',
  backdropBorderRadius: '4px',
  primaryColour: '#ffffff',
  secondaryColour: '#ffffff',
  tertiaryColour: '#ffffff'
}

imageLoadingConfig: ILoadingConfig = {
  animationType: ANIMATION_TYPES.threeBounce,
  backdropBackgroundColour: 'rgba(255, 255, 255, 0)',
  backdropBorderRadius: '4px',
  primaryColour: 'rgba(0, 0, 0, 0.1)',
  secondaryColour: 'rgba(0, 0, 0, 0.1)',
  tertiaryColour: 'rgba(0, 0, 0, 0.1)'
}

and finally

<ngx-loading [show]="loadingImage" [config]="imageLoadingConfig"></ngx-loading>

What's the rationale in removing the exports in 0b71780 ? I can understand that the class is not exported, but the interface should be, right?

Usage:

<ngx-loading [show]="loading" [config]="{ fullScreenBackdrop: false }"></ngx-loading>
Shows full-screen modal when, presumably, it should be limited to the component. Am I using this wrong?

hi ,
i want to close scroll page when loading is shown.
how can I?
thx

Hi,

Today, the loading component can be displayed or not. However, in case of a failed load for example, it would be nice to be able to be able to have a [showError] with its configuration to be able to show a different thing when in error occurred.

I was thinking about something like a sad face, or something similar:

This is a feature request, and not a bug report.

Hi,

I have tried to use ng-loading in my angular 5 project. though it seems to work fine with Promise based calls, it doesn't work at all with Rxjs observable calls. No error is output on console either, and it just doesn't show up.

Any ideas guys?

Thanks in advance.

by default animationType have four items : threeBounce,rotatingPlane,rectangleBounce,wanderingCubes but I would to change that animation by default to my image

Can we get more animations available? Like from ng-spin-kit? My UX team really wants something circular.

I'm trying to use ngx-loading here with the following setup:

HTML:

<my-app>
<ngx-loading [show]="loadingMask" [config]="{ backdropBorderRadius: '2px' }"></ngx-loading>

TS:

export class AppComponent implements OnInit {

    public loadingMask: boolean = false;

    constructor(router: Router, private trackingService: TrackingService, private loadingService: LoadingService) {
        this.loadingService.getLoadingObservable().subscribe(newLoading => {
            this.loadingMask = newLoading;
        });

    }
    ngOnInit() {    }
}

On the first time the function passed to subscribe is called (only the first one) I get this message on the console:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'show: false'. Current value: 'show: true'.
    at viewDebugError (core.js:8445)
    at expressionChangedAfterItHasBeenCheckedError (core.js:8433)
    at checkBindingNoChanges (core.js:8535)
    at checkNoChangesNodeInline (core.js:11401)
    at checkNoChangesNode (core.js:11390)
    at debugCheckNoChangesNode (core.js:11997)
    at debugCheckDirectivesFn (core.js:11925)
    at Object.eval [as updateDirectives] (AppComponent.html:8)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11914)
    at checkNoChangesView (core.js:11289)

The mask works, though, and it keeps working with no issues as long as I tested.

This workaround "fixes" the error, but I can't really see what's wrong with the first version of my code:

export class AppComponent implements OnInit {

    public loadingMask: boolean = false;

    constructor(router: Router, private trackingService: TrackingService, private loadingService: LoadingService, cdRef: ChangeDetectorRef) {
        this.loadingService.getLoadingObservable().subscribe(newLoading => {
            console.log("Changing loadingMask to " + newLoading);
            this.loadingMask = newLoading;

            //
            cdRef.detectChanges();
        });
    }
    ngOnInit() {  }
}

Is there anything that can explain that?