RXJS - Watch variable for change.

Question

I have a variable on a class called isLoading (boolean) with a default value of false. An action occurs (http request) and the variable is set to true. When the action completes, the variable is set back to false. How can i use RXjs to watch this variable?

this._dataSource = new HttpDataSource(this.service, this.paginator, this.sort, columns);

//this returns false since its before the action that has taken place 

this.isListLoading = this._dataSource.isLoading;

What i want is something like this in RXjs

this._dataSource = new MCHTTPDataSource(this.takeThisFormService, this.paginator, this.sort, columns);

const intervalId = setInterval(()=>{
    if( !this._dataSource.isLoading ){
        this.isListLoading = false;
        clearInterval( intervalId );
    }
}, 250 );

Thoughts?

isLoading should be an Observable, not a boolean. That way, you can observe the changes made to this observable, by subscribing to it. — JB Nizet

jtmg.io jtmg.io · Accepted Answer · 2018-03-30T23:28:49

For those that care

The component -

/*
**-------------------------------------------------------------------------------------
** METHOD NAME - ngOnInit
**-------------------------------------------------------------------------------------
*/
ngOnInit() {
    this.paginator.userPageIndex = 5;
    this.dataSource = new MCHTTPDataSource(
        this.tableService,
        this.paginator,
        this.sort,
        this.columnDefinitions
    );
    this.sub = this.dataSource.isLoading().subscribe(( isLoading )=>{
        //notify that loading is done or close loading image etc
        console.log( "still loading", isLoading );
    });
}
/*
**-------------------------------------------------------------------------------------
** METHOD NAME - ngOnDestroy
**-------------------------------------------------------------------------------------
*/
ngOnDestroy() {
    this.dataSource.disconnect();
    this.sub.unsubscribe(); 
}

The Service

        public dataLoadingChange = new BehaviorSubject(true);
    /*
        **-------------------------------------------------------------------------------------
        ** METHOD NAME - isLoading
        **-------------------------------------------------------------------------------------
        */
        isLoading():Observable<boolean>{
            return this.dataLoadingChange.asObservable();
        }   
        /*
        **-------------------------------------------------------------------------------------
        ** METHOD NAME - setLoading
        **-------------------------------------------------------------------------------------
        */
        setLoading( loading:boolean ){
            this.dataLoadingChange.next( loading );
        }

//To trigger 
this.setLoading( true | false );

RXJS - Watch variable for change.

1 Answers