Execute a function once an observable variable has been successfully initialized

Question

Execute a function once an observable variable has been successfully initialized

I'm currently putting together a chat application using socket.io in Angular. I've encountered an issue where I can't seem to execute a particular code or function right after an observable variable is initialized through subscription. The intention is for this code, once initialized, to automatically scroll down to show the most recent message, but it's firing too soon.

My suspicion is that the issue lies in the fact that the chatList variable below hasn't had enough time to populate with the list of messages.

While using

setTimeout(() => {//scroll function here}, 1);

does work, it isn't the most optimal solution.

this.getMessages()
  .subscribe((chat: string[]) => {
    this.chatList$ = chat;

    //I want the following code to be executed only once the above code is fully initialized.
     this.conversationList.nativeElement.scrollTop = this.conversationList.nativeElement.scrollHeight;
  });

Is there a correct method to ensure a specific code or function runs only when the observable has completed?

angular typescript socket.io rxjs observable

Answer 1

Answer №1

Utilize the MutationObserver to monitor the parent node containing your list of children. Then use subject to trigger from the callback indicating that the list is prepared for scrolling. In theory, this method should be effective.

this.childrenReady = new Subject();
// Update the DOM selection with your Angular viewChild nativeElement
var targetNode = document.getElementById('some-id');

// Options for the observer (specify which mutations to observe)
var config = {childList: true };

// Callback function to run when mutations are detected
var callback = function(mutationsList, observer) {
    if (mutation.type == 'childList') {
        this.childrenReady.next(true);
    }
};

// Create an observer instance tied to the callback function
var observer = new MutationObserver(callback);

// Begin observing the target node for specified mutations
observer.observe(targetNode, config);

this.getMessages().pipe(
  tap((chat: string[]) => {
    this.chatList$ = chat;
   }),
   switchMap(() => this.childrenReady())
).subscribe(() => {
     this.conversationList.nativeElement.scrollTop = this.conversationList.nativeElement.scrollHeight;

})

Answer 2

Utilize the MutationObserver to monitor the parent node containing your list of children. Then use subject to trigger from the callback indicating that the list is prepared for scrolling. In theory, this method should be effective.

this.childrenReady = new Subject();
// Update the DOM selection with your Angular viewChild nativeElement
var targetNode = document.getElementById('some-id');

// Options for the observer (specify which mutations to observe)
var config = {childList: true };

// Callback function to run when mutations are detected
var callback = function(mutationsList, observer) {
    if (mutation.type == 'childList') {
        this.childrenReady.next(true);
    }
};

// Create an observer instance tied to the callback function
var observer = new MutationObserver(callback);

// Begin observing the target node for specified mutations
observer.observe(targetNode, config);

this.getMessages().pipe(
  tap((chat: string[]) => {
    this.chatList$ = chat;
   }),
   switchMap(() => this.childrenReady())
).subscribe(() => {
     this.conversationList.nativeElement.scrollTop = this.conversationList.nativeElement.scrollHeight;

})

Execute a function once an observable variable has been successfully initialized

Answer №1

Similar questions

The styles applied to the Angular 5 Component host element are not being reflected correctly in jsPlumb

What is the method for bypassing libraries while troubleshooting Angular code in Visual Studio Code?

Encountering difficulty in presenting detailed information using a .json file

How can I access a DOM element in an AngularJS 2 TypeScript file?

Encountering trouble installing Angular CLI on MacOS High Sierra version 10.13.2

Typescript can represent both optional and required generic union types

Ways to dynamically link a JSON response object to an entity?

What could be causing issues with my unit tests in relation to Angular Material tooltips?

Tips on getting the dropdown value to show up on the header when it changes using Angular 2 and TypeScript

How can I effectively address process.on test in TypeScript Mocha Testing with the help of a Sinon Spy?

Uploading images using multipart in react is causing an error and cannot be completed

Using Angular 2: A Beginner's Guide to Navigating with the Latest Angular 2.0.0-rc.1 Router

How can one determine the source of change detection activation in Angular 2?

What is the method for extracting children from a singular object in json-server rather than an array?

add the string to the chat messages array in the observable

Can you explain the use of parentheses in a typescript type when defining a key?

Encountering an issue with setting up MikroORM with PostgreSQL due to a type

The ngIf directive in Ionic 2 does not refresh after a user logs in

The column is not properly aligned

When building with Angular using the "ng build" command, the JavaScript file names are altered