ngx-ui-loader icon indicating copy to clipboard operation
ngx-ui-loader copied to clipboard

Set Configuration to show Loader only in all POST web API HttpRequest?

Open llakhani opened this issue 5 years ago • 2 comments

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 avatar Apr 12 '20 19:04 llakhani

@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'

chirantan369 avatar Apr 26 '20 11:04 chirantan369

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()
                })
            )
    }
}

grosch avatar Dec 01 '21 00:12 grosch