@railinc/rl-block-ui

rl-block-ui

Installation

To install this library, run:

$ npm install @railinc/rl-block-ui --save

Changes

Breaking Change starting at version 0.3.0

1. Migrated from ng-http-interceptor to HttpClient interceptors provided by Angular, starting with version 4.3.2
   • If your project has a version of Angular older than 4.3.2, use rl-block-ui version 0.2.5 or before
2. Added RlBlockUiRequestInterceptor service to handle the request interception. This service injects RlBlockUiService to perform the previously supplied functionality

Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

$ npm install rl-block-ui

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { RlBlockUiModule } from '@railinc/rl-block-ui';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RlBlockUiModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once your library is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use your library component in app.component.html -->
<rl-block-ui></rl-block-ui>

RlBlockUiService API

setIgnorePatterns - takes an array of type RegExp of URL Patterns to ignore

setBlockLeaveTimeout - takes an number of miliseconds to wait before the block ui leave the screen after the last request has returned

start - Manually starts the RlBlockUI loading overlay

stop - Manually stops the RlBlockUI loading overlay

import { RlBlockUiService } from '@railinc/rl-block-ui';
...

export class AppComponent implements OnInit {

  consturctor(private rlBlockUiService : RlBlockUiService){

  }

  ngOnInit(){
    this.rlBlockUiService.setIgnorePatterns([
      /api\/endpoint\/toIgnore1/,
      /.*\/toIngore2/
    ]);

    this.rlBlockUiService.setBlockLeaveTimeout(500);

    // Manually start it
    this.rlBlockUiService.start(1234);

    setTimeout( () => {
      // Stop it after 5 seconds 
      this.rlBlockUiService.stop(1234)
    }, 5000)
  }

}

Development

To generate all *.js, *.js.map and *.d.ts files:

$ npm run tsc

To lint all *.ts files:

$ npm run lint

License

MIT © Derek Carter