CODEWITHSUNDEEP
angularrxjs
RoiTr
RoiTr

Reputation: 146

Avoid nested subscribing when you don't want the outer subscribe to complete, and the inner should complete

I have an Angular material menu with sub-menu panels. It's in a file manager app, and there is a context menu for the files, which has an option to "Move to" a folder:

enter image description here

I an trying to make clicking a middle level panel also close the entire menu (this is not the default behavior).

To do that, i wrote this function:

 private handleClosingOptionsMenuWhenMovingFiles() {
    this.actionsMenuOpened$.pipe(
      untilComponentDestroyed(this)
    ).subscribe(() => {
      this.documentsTabDetailsService.moveToFolderEvent$.pipe(
        takeUntil(this.contextMenuTrigger.menuClosed),
      ).subscribe(
        () => this.contextMenuTrigger.closeMenu(),
        () => { },
        () => console.log('🎉 COMPLETED'));
    });
  }

It works great, but it's using ugly nested subscribes, and i can't figure out how to convert it to a single pipe with operators, and only one subscribe at the end.

The issue is that the actionsMenuOpened$ should still be subscribed to, because the user may open the menu again, but the inner stream of moveToFolderEvent$ should complete each time the menu is closed.

Any idea?

Upvotes: 0

Views: 150

Answers (2)

RoiTr
RoiTr

Reputation: 146

I finally decided to go with another approach:

    this.documentsTabDetailsService.moveToFolderEvent$.pipe(
      untilComponentDestroyed(this))
      .subscribe(
        () => {
          if (this.contextMenuTrigger.menuOpen) {
            this.contextMenuTrigger.closeMenu();
          }
        }, err => { },
        () => console.log('🎉COMPLETED')
      );

It subscribes, and stays subscribed, to the event that fires when moving an item. I am not sure if which is better in terms of performance (maybe i'm now keeping an open subscription for longer).

Upvotes: 0

Shlok Nangia
Shlok Nangia

Reputation: 2377

please use flatmap along with pipe, try this

this.actionsMenuOpened(...)
  .pipe(
    flatMap(success => this.documentsTabDetailsService.moveToFolderEvent(...)),
  )
  .subscribe(success => {(...)});

please check more details about flatmap here http://reactivex.io/documentation/operators.html

Upvotes: 1

Related Questions