I have a SlickGrid Table, in which there are compound filters, currently when i try to change the compound filter (lets say from Equal To to Less Than), then it makes an API call.
I don't want to make an API call, how do i achieve this?
I searched in slickgrid docs, but couldn't find any property(if it is available).
Image
Please note that I'm the author of Angular-Slickgrid
So I looked at the problem you're having and it seems like a valid problem to look into, I agree that for some filters like the Compound Date Filter Operator we shouldn't query right away, that is after changing a the operator dropdown without providing a date. So, for that reason I am adding a new grid option skipCompoundOperatorFilterWithNullInput which will avoid triggering a filter change (it will also avoid querying the backend when implemented) when we first change the operator dropdown without providing a date being entered.
Note that this new option will only be available with Angular-Slickgrid v5.1.0+ (via this PR, now supports this and it will only be enabled by default on the Compound Date Filter (any other filters will have to explicitly enable this new flag either via grid option or via a column definition).
What if I cannot upgrade to 5.1.0? Are there any other ways of dealing with this?
Yes, it's just a bit more involving dealing with this though, it however requires a lot more work from your side. The information you need to know is that nearly every piece of code from Angular-Slickgrid and Slickgrid-Universal are protected TypeScript classes and functions which mean that you can simply use TypeScript to extends any of them. Let's take for example the CompoundDateFilter class, we could extend it this way to skip the callback triggering without a date provided (this._currentDate)
import { CompoundDateFilter, OperatorString } from '#slickgrid-universal/common';
export class CustomCompoundDateFilter extends CompoundDateFilter {
protected onTriggerEvent(e: Event | undefined) {
if (this._clearFilterTriggered) {
this.callback(e, { columnDef: this.columnDef, clearFilterTriggered: this._clearFilterTriggered, shouldTriggerQuery: this._shouldTriggerQuery });
this._filterElm.classList.remove('filled');
} else {
const selectedOperator = this._selectOperatorElm.value as OperatorString;
(this._currentValue) ? this._filterElm.classList.add('filled') : this._filterElm.classList.remove('filled');
// -- NEW CODE BELOW -- (to skip triggering callback on undefined date)
// when changing compound operator, we don't want to trigger the filter callback unless the date input is also provided
if (this._currentDate !== undefined) {
this.callback(e, { columnDef: this.columnDef, searchTerms: (this._currentValue ? [this._currentValue] : null), operator: selectedOperator || '', shouldTriggerQuery: this._shouldTriggerQuery });
}
}
this._clearFilterTriggered = false;
this._shouldTriggerQuery = true;
}
}
then use this new custom filter class in your column definitions
import { CustomCompoundDateFilter } from './custom-compoundDateFilter';
initGrid() {
this.columnDefinitions = [{
id: 'start', name: 'Start', field: 'start',
filterable: true, filter: { model: CustomCompoundDateFilter },
}];
}
and there you have it, below is a proof that it is working since I changed the operator and as you can see below this action is no longer resulting in 0 row returned. However if I had done the inverse, which is to input the date but without an operator, it would have execute the filtering because "no operator" is defaulting to the "equal to" operator.
I want to extend Observable and set another source (e.g. another Behaviour Subject)
E.g. NgRx is doing it here:
https://github.com/ngrx/platform/blob/9.0.0/modules/store/src/store.ts#L20
But RxJS Observable gives a deprecation warning on ´Observable.source´: https://github.com/ReactiveX/rxjs/blob/6.5.5/src/internal/Observable.ts#L25
This code is using the deprecated ´Observable.source´ - and it works:
const source: BehaviorSubject<any> = new BehaviorSubject(1);
class ObsStore extends Observable<any> {
constructor() {
super();
this.source = source; // Observable.source is deprecated
}
// Implement custom methods here
customMethod1() {}
}
export const obsStore$ = new ObsStore();
obsStore$.subscribe(data => console.log('output', data));
source.next(2);
// output 1
// output 2
Still I wonder if it is safe to use source. Is there maybe an alternative way to set an external source for an Observable?
NgRx also implements the lift method:
https://github.com/ngrx/platform/blob/9.0.0/modules/store/src/store.ts#L90-L95
Not sure if that is needed.
Here is a stackblitz example:
https://stackblitz.com/edit/extend-observable
Note: I want to extend Observable and add some custom public methods to it. The Custom Observable should behave like an BehaviorSubject but it should not expose next or getValue. Actually only pipe and the custom methods should be public.
I found this tweet from Ben Lesh (RxJS):
https://twitter.com/BenLesh/status/1366787138898055169
"I strongly advise people not extend Observable (or really any type that they don't own, from any library)."
Also Alex Okrushko from the NgRx team thinks that NgRx should better not have extended Observable.
https://twitter.com/AlexOkrushko/status/1379028869789970432
Composition will work much better + future proof.
I have an Angular 2 service:
import {Storage} from './storage';
import {Injectable} from 'angular2/core';
import {Subject} from 'rxjs/Subject';
#Injectable()
export class SessionStorage extends Storage {
private _isLoggedInSource = new Subject<boolean>();
isLoggedIn = this._isLoggedInSource.asObservable();
constructor() {
super('session');
}
setIsLoggedIn(value: boolean) {
this.setItem('_isLoggedIn', value, () => {
this._isLoggedInSource.next(value);
});
}
}
Everything works great. But I have another component which doesn't need to subscribe, it just needs to get the current value of isLoggedIn at a certain point in time. How can I do this?
A Subject or Observable doesn't have a current value. When a value is emitted, it is passed to subscribers and the Observable is done with it.
If you want to have a current value, use BehaviorSubject which is designed for exactly that purpose. BehaviorSubject keeps the last emitted value and emits it immediately to new subscribers.
It also has a method getValue() to get the current value.
The only way you should be getting values "out of" an Observable/Subject is with subscribe!
If you're using getValue() you're doing something imperative in declarative paradigm. It's there as an escape hatch, but 99.9% of the time you should NOT use getValue(). There are a few interesting things that getValue() will do: It will throw an error if the subject has been unsubscribed, it will prevent you from getting a value if the subject is dead because it's errored, etc. But, again, it's there as an escape hatch for rare circumstances.
There are several ways of getting the latest value from a Subject or Observable in a "Rx-y" way:
Using BehaviorSubject: But actually subscribing to it. When you first subscribe to BehaviorSubject it will synchronously send the previous value it received or was initialized with.
Using a ReplaySubject(N): This will cache N values and replay them to new subscribers.
A.withLatestFrom(B): Use this operator to get the most recent value from observable B when observable A emits. Will give you both values in an array [a, b].
A.combineLatest(B): Use this operator to get the most recent values from A and B every time either A or B emits. Will give you both values in an array.
shareReplay(): Makes an Observable multicast through a ReplaySubject, but allows you to retry the observable on error. (Basically it gives you that promise-y caching behavior).
publishReplay(), publishBehavior(initialValue), multicast(subject: BehaviorSubject | ReplaySubject), etc: Other operators that leverage BehaviorSubject and ReplaySubject. Different flavors of the same thing, they basically multicast the source observable by funneling all notifications through a subject. You need to call connect() to subscribe to the source with the subject.
I had similar situation where late subscribers subscribe to the Subject after its value arrived.
I found ReplaySubject which is similar to BehaviorSubject works like a charm in this case.
And here is a link to better explanation: http://reactivex.io/rxjs/manual/overview.html#replaysubject
const observable = of('response')
function hasValue(value: any) {
return value !== null && value !== undefined;
}
function getValue<T>(observable: Observable<T>): Promise<T> {
return observable
.pipe(
filter(hasValue),
first()
)
.toPromise();
}
const result = await getValue(observable)
// Do the logic with the result
// .................
// .................
// .................
You can check the full article on how to implement it from here.
https://www.imkrish.com/blog/development/simple-way-get-value-from-observable
I encountered the same problem in child components where initially it would have to have the current value of the Subject, then subscribe to the Subject to listen to changes. I just maintain the current value in the Service so it is available for components to access, e.g. :
import {Storage} from './storage';
import {Injectable} from 'angular2/core';
import {Subject} from 'rxjs/Subject';
#Injectable()
export class SessionStorage extends Storage {
isLoggedIn: boolean;
private _isLoggedInSource = new Subject<boolean>();
isLoggedIn = this._isLoggedInSource.asObservable();
constructor() {
super('session');
this.currIsLoggedIn = false;
}
setIsLoggedIn(value: boolean) {
this.setItem('_isLoggedIn', value, () => {
this._isLoggedInSource.next(value);
});
this.isLoggedIn = value;
}
}
A component that needs the current value could just then access it from the service, i.e,:
sessionStorage.isLoggedIn
Not sure if this is the right practice :)
A similar looking answer was downvoted. But I think I can justify what I'm suggesting here for limited cases.
While it's true that an observable doesn't have a current value, very often it will have an immediately available value. For example with redux / flux / akita stores you may request data from a central store, based on a number of observables and that value will generally be immediately available.
If this is the case then when you subscribe, the value will come back immediately.
So let's say you had a call to a service, and on completion you want to get the latest value of something from your store, that potentially might not emit:
You might try to do this (and you should as much as possible keep things 'inside pipes'):
serviceCallResponse$.pipe(withLatestFrom(store$.select(x => x.customer)))
.subscribe(([ serviceCallResponse, customer] => {
// we have serviceCallResponse and customer
});
The problem with this is that it will block until the secondary observable emits a value, which potentially could be never.
I found myself recently needing to evaluate an observable only if a value was immediately available, and more importantly I needed to be able to detect if it wasn't. I ended up doing this:
serviceCallResponse$.pipe()
.subscribe(serviceCallResponse => {
// immediately try to subscribe to get the 'available' value
// note: immediately unsubscribe afterward to 'cancel' if needed
let customer = undefined;
// whatever the secondary observable is
const secondary$ = store$.select(x => x.customer);
// subscribe to it, and assign to closure scope
sub = secondary$.pipe(take(1)).subscribe(_customer => customer = _customer);
sub.unsubscribe();
// if there's a delay or customer isn't available the value won't have been set before we get here
if (customer === undefined)
{
// handle, or ignore as needed
return throwError('Customer was not immediately available');
}
});
Note that for all of the above I'm using subscribe to get the value (as #Ben discusses). Not using a .value property, even if I had a BehaviorSubject.
Although it may sound overkill, this is just another "possible" solution to keep Observable type and reduce boilerplate...
You could always create an extension getter to get the current value of an Observable.
To do this you would need to extend the Observable<T> interface in a global.d.ts typings declaration file. Then implement the extension getter in a observable.extension.ts file and finally include both typings and extension file to your application.
You can refer to this StackOverflow Answer to know how to include the extensions into your Angular application.
// global.d.ts
declare module 'rxjs' {
interface Observable<T> {
/**
* _Extension Method_ - Returns current value of an Observable.
* Value is retrieved using _first()_ operator to avoid the need to unsubscribe.
*/
value: Observable<T>;
}
}
// observable.extension.ts
Object.defineProperty(Observable.prototype, 'value', {
get <T>(this: Observable<T>): Observable<T> {
return this.pipe(
filter(value => value !== null && value !== undefined),
first());
},
});
// using the extension getter example
this.myObservable$.value
.subscribe(value => {
// whatever code you need...
});
There are two ways you can achieve this.
BehaviorSubject has a method getValue() which you can get the value in a specific point of time.
You can subscribe directly with the BehaviorSubject and you may pass the subscribed value to a class member, field or property.
I wouldn't recommend both approaches.
In the first approach, it's a convenient method you can get the value anytime, you may refer to this as the current snapshot at that point of time. Problem with this is you can introduce race conditions in your code, you may invoke this method in many different places and in different timing which is hard to debug.
The second approach is what most developers employ when they want a raw value upon subscription, you can track the subscription and when do you exactly unsubscribe to avoid further memory leak, you may use this if you're really desperate to bind it to a variable and there's no other ways to interface it.
I would recommend, looking again at your use cases, where do you use it? For example you want to determine if the user is logged in or not when you call any API, you can combine it other observables:
const data$ = apiRequestCall$().pipe(
// Latest snapshot from BehaviorSubject.
withLatestFrom(isLoggedIn),
// Allow call only if logged in.
filter(([request, loggedIn]) => loggedIn)
// Do something else..
);
With this, you may use it directly to the UI by piping data$ | async in case of angular.
A subscription can be created, then after taking the first emitted item, destroyed. In the example below, pipe() is a function that uses an Observable as its input and returns another Observable as its output, while not modifying the first observable.
Sample created with Angular 8.1.0 packages "rxjs": "6.5.3", "rxjs-observable": "0.0.7"
ngOnInit() {
...
// If loading with previously saved value
if (this.controlValue) {
// Take says once you have 1, then close the subscription
this.selectList.pipe(take(1)).subscribe(x => {
let opt = x.find(y => y.value === this.controlValue);
this.updateValue(opt);
});
}
}
You could store the last emitted value separately from the Observable. Then read it when needed.
let lastValue: number;
const subscription = new Service().start();
subscription
.subscribe((data) => {
lastValue = data;
}
);
The best way to do this is using Behaviur Subject, here is an example:
var sub = new rxjs.BehaviorSubject([0, 1])
sub.next([2, 3])
setTimeout(() => {sub.next([4, 5])}, 1500)
sub.subscribe(a => console.log(a)) //2, 3 (current value) -> wait 2 sec -> 4, 5
Another approach, If you want / can to use async await (has to be inside of an async functions) you can do this with modern Rxjs:
async myFunction () {
const currentValue = await firstValueFrom(
of(0).pipe(
withLatestFrom(this.yourObservable$),
map((tuple) => tuple[1]),
take(1)
)
);
// do stuff with current value
}
This will emit a value "Right away" because of withLatestFrom, and then will resolve the promise.
Hello I want to use rxscala and scalafx together so I did this to re-package mouse events:
def mouseEvents: Observable[MouseEvent] = Observable.create(observer => {
stage.filterEvent(MouseEvent.Any)((event: MouseEvent) => {
observer.onNext(event)
event.consume
})
Subscription { ??? }
})
The problem is that inside the Subscription { ??? } block I want to remove the event filter that was registered by filterEvent() but looking at it I see that filterEvent() doesn't keep a reference to the event filter so I can't use stage.removeEventFilter(). I don't see a removeFilterEvent() equivalent either, so how are event filters registered using filterEvent() removed?
I guess a workaround is not to use filterEvent() and instead use the javafx's addEventFilter() but the syntax is worse.
Currently you can use addEventFilter(eventType, eventHandler) and removeEventFilter(eventType, eventHandler).
In the latest ScalaFX 1.0.0-M8-SNAPSHOT method filterEvent returns subscription as expected. (see ScalaFX Issue 115)
I want to listen to an event stream, then conditionally stop listening based on the received event.
In short, I'd like to use:
var subscription = stream.listen((event) {
if (f(event)) {
doStuff();
subscription.cancel();
} else {
doOtherStuff();
}
});
This obviously doesn't work; subscription doesn't exist until the listener has been created, resulting in an error.
How do I do this?
Just declare the subscription before subscribing to the stream:
var subscription;
subscription = stream.listen((event) {
if (f(event)) {
doStuff();
subscription.cancel();
} else {
doOtherStuff();
}
});
Divide and conquer.
First, let's consider the if (f(event)) part. That takes only the first item that matches the predicate and performs an operation. There are two ways of doing this:
stream.where((event) => f(event)).take(1).listen((event) => doStuff());
That's the generic way of doing things, and it means we use the Stream interface all through. Another way of doing it, which might avoid a few addition and comparison operations, requires switching to the Future interface:
stream.firstWhere((event) => f(event)).then((event) => doStuff());
That only handles the first part of the condition. What about the second part? We want to grab everything until the condition holds true, so we'll use takeWhile:
stream.takeWhile((event) => !f(event)).listen((event) => doOtherStuff());
And Bob's your uncle.
If the code is essentially the same for both listeners, you can separate it out into another function, of course.