Is including takeUntil in every pipe really necessary?

I'm curious whether it's better to use takeUntil in each pipe or just once for the entire process?

search = (text$: Observable<string>) =>
text$.pipe(
  debounceTime(200),
  distinctUntilChanged(),
  filter((term) => term.length >= 2),
  tap(() => (this.searching = true)),
  switchMap((term) =>
    this.searchService.search(term).pipe(
      catchError(() => {
        this.searchFailed = true;
        return of([]);
      }),
      takeUntil(this._destroy$)
    )
  ),
  tap(() => (this.searching = false)),
  takeUntil(this._destroy$)
);

Answer №1

It really hinges on the desired outcome you are aiming for.

If you opt to solely utilize the final takeUntil, once its observable emits, the entire stream will be unsubscribed.

Alternatively, if you choose to only incorporate the takeUntil within the callback of switchMap, then when it emits, just the inner observable of switchMap will be unsubscribed, not the whole stream.

Hence, if your intention is to completely unsubscribe the entire stream, then insert a takeUntil at the end of the primary (outer) stream. However, if you wish for a particular inner observable to finish only upon the emission of a specific observable, then you should include takeUntil solely in that location.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can the WebSocket interface be substituted with WebSocket itself?

I'm currently in the process of setting up a WebSocket.Server using ws, Express 4, NodeJS, and TypeScript by following a guide. However, I've encountered an issue with the provided code not working as expected from the tutorial found at . In ord ...

What are the steps to set up a dictionary with predetermined values?

My task is to create a pre-defined dictionary where the key represents a city and the value is an array of zones in that city. Here is my attempt: export const cityToZone: { [city: string]: Array<string> } = [ {city:'New York', [&apos ...

The system has encountered an issue: "EntityMetadataNotFound: Unable to locate metadata for the entity named 'User

Just wanted to reach out as I've been encountering an issue with my ExpressJS app recently. A few days ago, everything was running smoothly without any errors. However, now I'm getting a frustrating EntityMetadataNotFound: No metadata for "User" ...

The specified file cannot be found within the Node file system

I am working on a project that involves reading a file using Node fs, and I have the following code: const files: FileSystemTree = { "Component.tsx": { file: { contents: fs.readFileSync( `../../apps/components ...

Image two-way binding in Angular is not performing as anticipated

My Angular component is designed to display a base64 image string received from a websocket in the HTML using an image tag. I am polling the websocket every second and attempting to display the updated image on the page. Here is my code: HTML of the compo ...

Changing the type of an object's property in TypeScript on the fly

I am working on a TypeScript function that is designed to dynamically modify the property of an object. Here is the function: const updateProperty = (value: any, key: keyof Type1, obj: Type1) => { obj[key] = value; } Below is the definition of "Typ ...

Managing Angular routing: selectively updating named outlets without reloading submodules

My routing configuration currently reloads Module2 ListComponent on every routing event. However, I want to prevent the list from reloading when a user clicks on a list item within ListComponent. Specifically, when navigating from module2/route1 to module ...

Difficulty reloading after updating input using AngularJS ngTable

I'm encountering an issue where I need to utilize ngTable with TableParams to load and modify a table. For instance, when the page initializes, entering a number in the textbox for the first time displays the appropriate number of rows in the table. ...

Guide to creating unit tests for a button click function in an Angular project

I wrote some code for unit testing, but it doesn't seem to be working. I'm new to unit testing and would appreciate some guidance on how to use it. COMPONENT.HTML <button class="set-button" (click)="clickFunction()"> SA ...

Automatically select a value in MUI AutoComplete and retrieve the corresponding object

I recently set up a list using the MUI (v4) Select component. I've received a feature request to make this list searchable due to its extensive length. Unfortunately, it appears that the only option within MUI library for this functionality is the Au ...

Incorporating a counter feature into an Angular HTML document

In this section, I am displaying the restaurants that are filtered based on their name and address. If no name or address is provided, all restaurants are shown. However, I am facing an issue as I need to incorporate a counter to keep track of the remainin ...

After filling a Set with asynchronous callbacks, attempting to iterate over it with a for-of loop does not accept using .entries() as an Array

Encountering issues with utilizing a Set populated asynchronously: const MaterialType_Requests_FromESI$ = SDE_REACTIONDATA.map(data => this.ESI.ReturnsType_AtId(data.materialTypeID)); let MaterialCollectionSet: Set<string> = new Set<s ...

What is the implication when Typescript indicates that there is no overlap between the types 'a' and 'b'?

let choice = Math.random() < 0.5 ? "a" : "b"; if (choice !== "a") { // ... } else if (choice === "b") { This situation will always be false because the values 'a' and 'b' are completely disti ...

What is the best way to end a Google OAuth session using Firebase on an Ionic 2 application?

My Ionic 2 app integrates Google Authentication using Firebase. I have implemented a logout button within the app that calls the Firebase unauth() method. However, this only disconnects the Firebase reference and does not terminate the Google OAuth session ...

Every time I attempt to use the reset() function in typescript, I encounter a type error that prevents its

I am encountering a type error message that reads: 9: Property 'reset' does not exist on type 'EventTarget'. 18 | }); 19 | 20 | e.target.reset() | ^^^^^ 21 | } Below is the relevant code snippet: const hand ...

Updating the value of a key in an object is not functioning as expected

There is a single object defined as requestObject: any = { "type": 'type1', "start": 0, "size": 10, "keywords": ['abcd','efgh'], filters: [], } Next, attempting to change the value for keyword, I updat ...

Is there a way to prevent future dates from being selected on angular p-calendar?

I need help with disabling future dates in a calendar datepicker input field. Here's how I'm currently using it: <p-calendar maxDate="dateTime" showTime="true" hourFormat="12" showButtonBar="true" [(ngModel)]="dateTime" name="timeOfUse" requ ...

String values not being set as default in Angular Material's mat-button-toggle-group

<div class="navigation"> <mat-button-toggle-group class="button-toggle" [(ngModel)]="langSelected" (change)="onToggleGroupChange($event)" [value]="langSelected"> <mat-button-toggle value=& ...

Issue with passing parameters to function when calling NodeJS Mocha

I have the following function: export function ensurePathFormat(filePath: string, test = false) { console.log(test); if (!filePath || filePath === '') { if (test) { throw new Error('Invalid or empty path provided'); } ...

Shattered raw emotion

Does anyone have any insight on how to resolve this error? I've hit a roadblock trying to figure out the issue in the message below. Here is the snippet of code: :label="` ${$t('cadastros.clientes.edit.status')}: ${cliente.status === ...