Repository files navigation

Angular 5+ simple loading-mask ui component.DEMO

• global config
• customizable loading snippet comp
  • with global config
  • with templateDef
• mask container directive
• events observable
• ember layout support
• httpClient interceptor integrate
• docs
• unit-test cases

npm install ngx-loading-mask --save

Note: this lib depends on@angular/cdk/portal, make sure you have installed it.

then just importLoadingMaskModule toAppModule's imports array

imports: [  ...,  LoadingMaskModule.forRoot(config)]

• snippet(SnippetConfig): loading snippet config object
  • imgUrl(string): loading snippet uri, default:null
  • size(number): snippet size(in px), default:144
• mask(MaskConfig): loading mask config object
  • bgColor(string): loading mask background color, default:rgba(255, 255, 255, .7)
• clsMapping(ClsMapping): class suffix
  • snip(string): loading snippet class suffix, default:ngx-loading-snip
  • mask(string): loading mask class suffix, default:ngx-loading-mask
• debug(boolean): toggle debug mode, default:false

just declare[ngxLoadingMask] into your app container element orbody

<div ngxLoadingMask>    ...</div>

similar to global one, just declare the group name to [ngxLoadingMask] like

<div [ngxLoadingMask]="'foo'">    ...</div>

just useLoadingMaskService to toggle loading mask

// to show maskthis.service.showGroup(groupName)// to hide mask this.toggleDone(groupName)

if groupName isundefined, the default value of it was global loading mask group name, for sake of toggling local mask, you need assign local group name to it, likefoo or something else.

In above section, the code style was imperative. If you want more declarative, we can use AngularhttpClient interceptor feature.

Note: Until now, AngularhttpClient api all have string type constraint, that means cannot patch custom metadata param intooptions, this library usedcustom-header instead.

with originhttpClient service, it is easy to patchheaders

http  .post('/api/somthing/', body, {    headers: new HttpHeaders().set('X-Loading-Mask', 'foo'),  })  .subscribe();

the loading mask metadata is bind toX-Loading-Mask key of the headers. The key has been exported as constant(LOADING_MASK_HEADER) of the module entry.

above code is relly ugly due to we must setHttpHeader manually but we only take care which loading mask should be toggle on during request process. The code could be more declarative by extending defaulthttpClient service class and providing other custom api on it, something like

export class HttpService extends HttpClient {  ...  withLoadingMask(groupName: string = DEFAULT_MASK_GROUP): HttpService {    return this.addInterceptor({      intercept(req, next) {        req = req.clone({          setHeaders: { [LOADING_MASK_HEADER]: groupName },        })        return next.handle(req)      }    })  }  ...}

then you can use it as

http.withLoadingMask('foo')  .post('/api/somthing/', body)  .subscribe();

see whole example inHERE

• ngxLoadingMask(string): loading mask group name, if null, use default global loading mask gorup name instead.

mask template var, could assign custom loading spin template with it, for example:

<div ngxLoadingMask>  <ng-template #mask *ngIf="isCustom">    <h1>      {{customMessage}}...(global)    </h1>  </ng-template></div>

theng-template override the default loading spin template, see more inDEMO site.

get the loading mask events Observable corresponding to groupName, if groupName is undefined, will listen to all events

emitpending event of loading mask corresponding to groupName

emitdone event of loading mask corresponding to groupName

emiterror event of loading mask corresponding to groupName, but throw error

if a loading mask group is global default group

if a loading mask group is indone status

get group instance of groupName, if don't existed andsafe = true, set new group instance with groupName and return it

set group instance of groupName, ifreplace = false, will return exited group instance with corresponding groupName, otherwise, will replace current group instance with new one

register loading mask group instance

unregister loading mask group instance