Installation
Install ngx-loading via NPM, using the command below.
NPM
npm install --save ngx-loading
Getting started
Import the LoadingModule
in your root application module:
;
;
;
;
You must create a boolean (e.g. loading
below) that is accessible from the component which will contain ngx-loading. This boolean is used as an input into ngx-loading, and will determine when the loading spinner is visible.
;
}
Next, add the ngx-loading component selector to your application component's template. Set the [show]
input variable of ngx-loading to point to your boolean, which will determine when ngx-loading is visible. Optionally set the [config]
input variable of ngx-loading to setup custom configuration options. If the [config]
input variable is not set, the globally configured configuration will be used, if set. If no config options are set, the ngx-loading default config options will be used. See - Config options for further information.
NOTE: ngx-loading will fill the entirety of its parent component. If you wish for ngx-loading to only fill a specific element within your component, ensure that ngx-loading is a child element of that element, and that the containing element has its position
attribute set to relative
.
//...
Input parameters
The ngx-loading input parameters are displayed below.
Config options
Config options can be set globally (using the .forRoot() module import statement
), as well as being passed into each ngx-loading instance, if required. Config options that are passed into an ngx-loading element will override any custom global config options that have been set. A combination of the two can be used together if appropriate. If no config is set, the default ngx-loading config options will be used. Please see below for an example custom configuration setup, using both global and local configurations.
;
;
;
;
//...
The config options are displayed below. Each of the properties are optional, and passing a config to ngx-loading is itself, optional.