Monitoring for adjustments in variable with RXJS

Question

Monitoring for adjustments in variable with RXJS

One of my classes has a boolean variable called isLoading with a default value of false. It gets set to true when a certain action (HTTP request) occurs and then back to false once the action is completed. I am interested in using RXjs to monitor this variable.

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

//This currently returns false as it happens before the action takes place 

this.isListLoading = this._dataSource.isLoading;

I would like to achieve something similar using 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 );

Any thoughts on this approach?

angular typescript rxjs

Answer 1

Answer №1

For those who are interested

The element -

/*
**-------------------------------------------------------------------------------------
** FUNCTION 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 when loading is complete or close loading image, etc.
        console.log( "still loading", isLoading );
    });
}
/*
**-------------------------------------------------------------------------------------
** FUNCTION NAME - ngOnDestroy
**-------------------------------------------------------------------------------------
*/
ngOnDestroy() {
    this.dataSource.disconnect();
    this.sub.unsubscribe(); 
}

The Endpoint


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

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

Answer 2

For those who are interested

The element -

/*
**-------------------------------------------------------------------------------------
** FUNCTION 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 when loading is complete or close loading image, etc.
        console.log( "still loading", isLoading );
    });
}
/*
**-------------------------------------------------------------------------------------
** FUNCTION NAME - ngOnDestroy
**-------------------------------------------------------------------------------------
*/
ngOnDestroy() {
    this.dataSource.disconnect();
    this.sub.unsubscribe(); 
}

The Endpoint


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

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

Monitoring for adjustments in variable with RXJS

Answer №1

Similar questions

Issue: The formGroup function requires a valid FormGroup instance to be passed in. Data retrieval unsuccessful

Utilizing JavaScript files within Angular2 components: A guide

Running your Angular application on a Node server: Step-by-step guide

Angular - Conceal Protected Links on the Template

Leveraging SumoLogic for managing logs in Angular 2 and higher applications

Vertical and horizontal tabs not functioning properly in Mat tabs

How to leverage tsconfig paths in Angular libraries?

Getting rid of parameters in HttpParams in Angular 4.3

Avoid unnecessary re-rendering of React Native components with each update of the state

Guide on moving elements to a different list with the help of the Angular DragDrop CDK Service

Error with Typescript types when using Styled Components

Using an Object as a parameter in a Typescript function

When I utilize the redux connect function, the class information in my IDE (PhpStorm/WebStorm) seems to disappear

Issue with font-size changes using css variables in Angular not updating in browser for specific fields

Sequelize 5: Error encountered when using many-to-many functions

Converting ASP .Net Core Dto's and Controllers into TypeScript classes and interfaces

What is the best way to instruct Angular to exclude certain sections of a template from compilation?

Keeping an Rxjs observable alive despite encountering errors by simply ignoring them

"Question: How can I make a checkbox display 'true' and '

Is there a way to create a reusable type annotation for declaring functions in Typescript?