Angular rxjs: Wait for another Observable to emit before subscribing

Question

Angular rxjs: Wait for another Observable to emit before subscribing

My setup involves having 2 subscriptions - one is related to my ActivatedRoute, and the other is from ngrx Store.

  ngOnInit() {
    this.menuItems$ = this.store.select('menuItems');
    this.menuItems$.subscribe(data => {
      this.menuItems = data.menuItems;
    });
  }

  ngAfterViewInit() {
    this.fragmentSubscription = this.route.fragment.pipe(
      filter((fragment: string) => typeof fragment === 'string')
    ).subscribe((fragment: string) => {
      setTimeout(() => {
        const element: ElementRef = this.menuItems.find(menuItem => menuItem.link === fragment).element;
        if(element !== undefined) {
          element.nativeElement.scrollIntoView({ behavior: "smooth", block: "start", inline: "center" });
        }
      });
    });
  }

Due to a dependency between my ActivatedRoute (fragment) subscription and my store subscription data, I need to delay the former until the latter has been successfully subscribed for the first time.

Is there an rxjs operator that can help achieve this?

Thanks

javascript angular typescript rxjs

Answer 1

Answer №1

Your feedback indicates that...

If I no longer want to wait for the Store's initial emission when the ActivatedRoute subscribes

The solution you are seeking is called combineLatest, which allows you to...

Emit the latest value from each observable whenever any of them emits a new value.

Here is how you can implement it:

import { Subscription, combineLatest } from 'rxjs';

// ...

mySubscription: Subscription;

ngOnInit() {
  this.mySubscription = combineLatest(
    this.store.select('menuItems'),
    this.route.fragment.pipe(
      filter((fragment: string) => typeof fragment === 'string')
    )
  // Make sure to specify the data types instead of using ANY...!
  ).subscribe((data: [any, any]) => {
    this.menuItems = data[0];
    const fragment = data[1]
    // Add your logic here...
  })
}

ngOnDestroy() {
  this.mySubscription.unsubscribe();
}

Answer 2

Your feedback indicates that...

If I no longer want to wait for the Store's initial emission when the ActivatedRoute subscribes

The solution you are seeking is called combineLatest, which allows you to...

Emit the latest value from each observable whenever any of them emits a new value.

Here is how you can implement it:

import { Subscription, combineLatest } from 'rxjs';

// ...

mySubscription: Subscription;

ngOnInit() {
  this.mySubscription = combineLatest(
    this.store.select('menuItems'),
    this.route.fragment.pipe(
      filter((fragment: string) => typeof fragment === 'string')
    )
  // Make sure to specify the data types instead of using ANY...!
  ).subscribe((data: [any, any]) => {
    this.menuItems = data[0];
    const fragment = data[1]
    // Add your logic here...
  })
}

ngOnDestroy() {
  this.mySubscription.unsubscribe();
}

Answer 3

Answer №2

Avoid retrieving your data directly from the store during initialization whenever possible. Instead, consider fetching them from a resolver.

Alternatively, you can retrieve the data from the store within the resolver and then access it in the init function as needed.

For additional information, refer to https://angular.io/api/router/Resolve

Answer 4

Avoid retrieving your data directly from the store during initialization whenever possible. Instead, consider fetching them from a resolver.

Alternatively, you can retrieve the data from the store within the resolver and then access it in the init function as needed.

For additional information, refer to https://angular.io/api/router/Resolve

Angular rxjs: Wait for another Observable to emit before subscribing

Answer №1

Answer №2

Similar questions

Problem with deploying Angular 2 project on Github

A step-by-step guide on incorporating the C3 Gauge Chart into an Angular 5 application

Validating optional fields in React

Tips for parsing a string object in JSON without a preceding double quote

Is it possible to retrieve the IMEI number of a mobile phone using expo?

The initialization of the R Shiny HTML canvas does not occur until the page is resized

Using $anchorScroll in Angular to create an anchor link that links to the same page but with a style change seems to be ineffective

Moving through divisions that share a common class name using jquery

Retrieve information stored in a component's data variable

Resetting the Angular provider configuration whenever the service is injected into a different location

Is it possible to customize the appearance of the selected item in a select box? Can the selected value be displayed differently from the other options?

Is it possible to integrate ngx Pagination with Bootstrap?

Continuously refreshing the information displayed in the Angular view that is linked to a function in the TypeScript file whenever a modification is identified

Calculating distinct values within a single key in an object

jQuery fade in problem or alternate solutions

Question from a student: What is the best way to transfer information between different classes?

What is the best way to change the value of a div using JavaScript?

AngularJS - Directives cannot pass their class name into inner template

Using React.js - What is the process for submitting a form automatically when the page loads?

Is it possible to implement a single OrbitControls with two cameras in ThreeJS?