ngx-ui-loader
ngx-ui-loader copied to clipboard
Set Configuration to show Loader only in all POST web API HttpRequest?
Hi, I'm using this with angular 8 and it works fine. But my Project's has so many GET web API HttpRequest calls. And we don't want to show loader on those calls. We only want to show on POST API Requests.
Yes, I tried using 'exclude', but my most of POST APIs have same path as GET APIs, so It won't work for me.
Thanks
@llakhani You can use this type. using the query string. you have to concat api with '?NOLOADER' NgxUiLoaderHttpModule.forRoot({ showForeground: true, excludeRegexp: ['NOLOADER'] }),
const apiUrl = API.GET_CUSTOMER_DETAILS + API.NOLOADER; NOLOADER: '?NOLOADER'
I think a much better solution would be to use an HttpInterceptor that injects the loader service and then calls start or stop as appropriate. You would only call them if the method is POST. Putting a random string into the API query string is asking for trouble as far as long-term maintenance goes.
@Injectable()
export class ShowLoaderInterceptor implements HttpInterceptor {
#counter = 0
constructor(private readonly service: NgxUiLoaderService) {
}
intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
const show = request.method === 'POST'
if (show)
this.service.start()
return next.handle(request)
.pipe(
finalize(() => {
if (show && --this.#counter === 0)
this.service.stopAll()
})
)
}
}