Compare Observable's Previous Value With Next Value in Angular

user_1625304 0
Viewed 12745

I have been working on an App that allows a few different components to update a BehaviorSubject in Angular. Within each component I store a local copy of the previous BehaviorSubject value. In order to know whether or not the component generated the new value being pushed out I was planning on just comparing the two objects using LoDash's _.isEqual() function. However I am finding that my local copy of the Observable has already been updated before the comparison can take place.

Does Angular look for = statements and create an external binding to that component property outside of the Observable next function?

Given the code below I am finding that my this.QueryParams property within the component has been updated to the current value being processed in the function, causing my comparison to fail even though I don't assign the new value to the property until the if statement has been evaluated.

Component

export class LogsModalComponent implements OnInit {

    private QueryParams: LogsQueryParameters

    ngOnInit() {

        this._LogsService.QueryParameters$.subscribe(_QueryParams => {
            console.log(this.QueryParams);
            console.log(_QueryParams);

            if (!_.isEqual(this.QueryParams, _QueryParams) {
                this.QueryParams = _QueryParams;

                // Some code to process if the new value was different.
            }
        }
    }

    updateStartDate() {
        this.QueryParams.filterStartDate = _.isUndefined(this.FilterStartDate) ? NaN : new Date(this.FilterStartDate.nativeElement.value).getTime();
        this._LogsService.updateQueryParams(this.QueryParams);
}
}

Service

    LogsQueryParameters: BehaviorSubject<LogsQueryParameters> = new BehaviorSubject<LogsQueryParameters>({
            limit: 25,
            logLevels: "",
            logTypes: "",
            logUserIDs: "",
            filterStartDate: NaN,
            filterEndDate: NaN
        })
        LogsQueryParameters$ = this.LogsQueryParameters.asObservable();

    updateQueryParams(QueryParams) {
        this.LogsQueryParameters.next(QueryParams);
    }
lodash observable rxjs angular typescript
2 Answers

For those who want to compare the previous value with the current value of an Observable (or BehaviourSubject), just simply use the pairwise operator. Eg:

ngOnInit() {
    this._logsService.yourObservable$.pipe(pairwise()).subscribe(([previous, current]) => {
        if (previous !== current) {
            // Some code to process if the new value was different.
        }
    }
}
user_21811110
Related