Comments (3)
You can use a custom operators, maybe something like this:
export function showBusy() {
return function showBusyOperatorImplementation(source) {
return Observable.create(subscriber => {
const angularBusyService = ServiceLocator.injector.get(AngularBusyService);
const subscription = source.subscribe(value => {
try {
subscriber.next(value);
} catch (err) {
subscriber.error(err);
}
},
err => subscriber.error(err),
() => subscriber.complete());
angularBusyService.busyWithProgressBar = subscription;
return subscription;
});
};
}
then you can use function showBusy() in pipe, something like this.getAlerts(page).pipe(showBusy(), map(...)) . The operator showBusy used to put the busy things into a service called angularBusyService, and the directive can get the busy things from the service.
from angular-opensource.
I use the ServiceLocator just because I don't want to pass it in to showBusy as a param.
from angular-opensource.
Thanks @victos I can't believe I didn't notice your answer. I've literally circled around 5 months later looking for the same answer so I can apply ng-busy
between an Angular Material dialog that has been closed, and an exhaustMap
of the actual request based on the response, which would work great using a pipe:
this.dialog
.open(ConfirmDialogComponent, {
data: { title: '...', message: `...` }
})
.afterClosed()
.pipe(
showBusy()
exhaustMap((decision: boolean) =>
(decision)
? this.resource.action(...)
: empty()
),
catchError((error: any) => { ... })
)
I understand roughly what you're doing in the above example having created few simple reusable operators, but nothing like your example, and I'm a bit confused regarding the last sentence.
Is this what you mean by the ServiceLocator
and it will find the AngularBusyService
? Are there any downsides to doing this... like performance? Seems to be an anit-pattern for DI based on some reading. Alternatively, I was trying to DI the AngularBusyService
from the parent component and pass it into showBusy as a param, but can't seem to find or import it.
import {Injector} from "@angular/core";
export class ServiceLocator {
static injector: Injector;
}
That gets used like:
import {ServiceLocator} from './locater.service.ts';
export class AppModule {
constructor(private injector: Injector){ // Create global Service Injector
ServiceLocator.injector = this.injector;
}
}
export function showBusy() {
return function showBusyOperatorImplementation(source) {
return Observable.create(subscriber => {
const angularBusyService = ServiceLocator.injector.get(AngularBusyService);
const subscription = source.subscribe(value => {
try {
subscriber.next(value);
} catch (err) {
subscriber.error(err);
}
},
err => subscriber.error(err),
() => subscriber.complete());
angularBusyService.busyWithProgressBar = subscription;
return subscription;
});
};
}
from angular-opensource.
Related Issues (20)
- Angular 8.0.0 support HOT 1
- The spinner and the text are not visible if page has scrolled down HOT 2
- Feature: Automatically toPromise() Observables HOT 2
- Access BusyTrackerService HOT 2
- Function calls are not supported in decorators but BusyConfig was called. HOT 2
- Angular 9.0.0 support HOT 1
- Build against angular 10 HOT 2
- Directive isn't accepting options HOT 3
- Upgrade to angular 12 HOT 1
- ngOnDestroy hook not called for custom component set as template HOT 3
- [Question] How can I make the busy indicator showing for the div, not for the whole page? HOT 2
- what about Angular 13? HOT 3
- Upgrade rjxs to newer version HOT 1
- Will subscription be unsubscribed like the "async" pipe? HOT 1
- Upgrade to Angular 15 HOT 2
- upgrade to angular 16
- upgrade to angular 17 HOT 1
- peer dependencies - add rxjs 7.4.0 for V15
- entire app disabled, not only target in angular 17
- signal support
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-opensource.