This module allows for blocking automatically during all HTTP requests made with the HttpClient
The core BlockUIModule
should first be imported within the app. Once added, a seperate module called BlockUIHttpModule
should then be imported to allow for HTTP blocking.
import { HttpClientModule } from '@angular/common/http';
import { BlockUIModule } from 'ng-block-ui';
import { BlockUIHttpModule } from 'ng-block-ui/http';
@NgModule({
imports: [
HttpClientModule, // Import Http Client
BlockUIModule.forRoot(), // Import BlockUIModule
BlockUIHttpModule.forRoot(), // Import Block UI Http Module
],
...
})
export class AppModule {}
Accepts an array of requests to be filtered out from being blocked.
Types
requestFilters: (RegExp | { method: string, url: RegExp } | Function)[]
Note: If using RegExp with AOT compiling, please see this Stack Overflow Post.
Filter requests by URL
Below will filter out blocking for any requests containing api.github.com/users/
in the URL.
@NgModule({
imports: [
...
BlockUIHttpModule.forRoot({
requestFilters: [/api.github.com\/users\//]
}),
],
...
})
export class AppModule {}
Filter requests by http method and URL
Below will filter out blocking for any requests with a POST
method and a URL containing api.github.com/users/
@NgModule({
imports: [
...
BlockUIHttpModule.forRoot({
requestFilters: [{
method: 'POST',
url: /api.github.com\/users\//
}]
}),
],
...
})
export class AppModule {}
Filter requests by passing a function. The function will be passed the current request and if true
is returned the request will not be blocked.
Below will filter out all requests with a query parameter of foo=bar
.
function filterFooBar(req HttpRequest<any>): boolean {
return req.params.get('foo') === 'bar';
}
@NgModule({
imports: [
...
BlockUIHttpModule.forRoot({
requestFilters: [filterFooBar]
}),
],
...
})
export class AppModule {}
If set to false
, when multiple http requests are fired off blocking will stop when the first request resolves instead of waiting for all requests to resolve.
Defaulted to true
.