The subscriber continues to run repeatedly, even after we have removed its subscription

The file brief-component.ts contains the following code where the drawer service is being called:

this.assignDrawerService.showDrawer(parameter);

In the file drawer-service.ts:

 private drawerSubject = new BehaviorSubject<boolean>(false);
    public drawer$: Observable<boolean> = this.drawerSubject.asObservable();

 public showDrawer(viewType:any) {
        this.drawerSubject.next(viewType);
        }

Within the file drawer-component.ts, it seems that the debugger is hitting multiple times:

this.assignDrawerService.drawer$.subscribe(viewType => {
      debugger
});

The user mentions having tried methods such as takeUntil, unsubscribe, and first to only run the subscriber once.

Answer №1

It appears that you are utilizing a BehaviorSubject, which comes with an initial value (such as "false" in this scenario). This implies that it will emit at least one event with the value "false" before emitting any subsequent values when

this.drawerSubject.next(viewType);
is called.

To avoid this behavior, consider using a regular Subject without an initial value.

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

Using jQuery to select the next table cell vertically

Is there a way to utilize jQuery to access the cell (td) directly below a given cell in a traditional grid-layout HTML table (where each cell spans only one row and column)? I understand that the code below will assign nextCell to the cell immediately to ...

Sending a document through the input field with React Hook Form

In my application, I have implemented a file input to submit a file and send it to a firebase storage bucket. To achieve this functionality, I am utilizing the react-hook-form library. However, I encountered an issue - I wanted the file to be uploaded with ...

Is there a simple solution to show script 1 to visitors from the US and Canada, while displaying script 2 to visitors from other countries?

I'm looking for a simple script that can show one script to visitors from the US and Canada, and another script to visitors from other countries. It doesn't have to be perfect, but using a service like seems too complex for me. Is there a stra ...

How to retrieve query parameters using Angular 2's HTTP GET method

Seeking assistance on my Ionic 2 app built with Angular 2 and TypeScript. I am familiar with older versions of Angular, but still adjusting to this new environment. I have set up my API with basic query strings (e.g domain.com?state=ca&city=somename) ...

Angular data binding with [object object]

Upon receiving data from my API, the console displays the following structure: [ { id:"123", name:"asd", address:"st.dddss", status:1 } ] After attempting to iterate through it using ngFor, an error is thrown: E ...

Having trouble upgrading to the newest version of angular-cli on my Ubuntu 14.04 system

I'm currently in the process of updating my angular-cli version by running: npm install -g <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="70111e17051c11025d131c11025d14">[email protected]</a> However, I enco ...

Issue with PrimeFaces radiobutton styles not updating after being clicked programmatically

My setup includes a p:selectOneRadio constructed like this: <p:selectOneRadio id="positionRadio" value="#{employeeBean.empPosition}" converter="#{empPositionConverter}" layout="custom" required="true" requiredMessage="Please select ...

Tips for updating the icon based on the active or inactive status in ag-grid within an angular application

HTML* <ng-template #actionButtons let-data="data"> <div class="cell-actions"> <a href="javascript:;" (click)="assign()"> <i nz-icon nzType="user-add" nzTheme= ...

Unable to send a function as props to a child component in TypeScript

Within my application, I have a parent component that holds a state and a setState function. This state and function are then passed down to a child component in order to retrieve values (such as input field data). When the function is triggered in the chi ...

Is there a way for app.use to identify and match requests that begin with the same path?

Given that app.use() responds to any path that starts with /, why does the request localhost:3000/foo match the second method instead of the first? app.use("/",express.static('public'), function(req,res,next) { console.log(& ...

What is the AngularJS equivalent of prevAll() and nextAll() functions in jQuery?

Currently, I am working on a project that involves AngularJS and I'm having trouble finding an example that fits my needs... With AngularJS, I know how to apply a class when an element is clicked, but how can I add a class to all previous items and r ...

Dynamically loading an AngularJS controller

I am faced with the challenge of integrating an Angular app with dynamically loaded controllers into an existing webpage. Below is a code snippet where I have attempted to achieve this based on my understanding of the API and some research: // Create mod ...

Explain what mongoose and Schema are at the beginning, just once

Hello, I am currently working on a Node.js application using Express and MongoDB. In order to utilize MongoDB and schema, I have to define Mongoose and schema in all of my routing JavaScript files. However, I would like to only define them once. As I am ne ...

render target in three.js EffectComposer

When we utilize an EffectComposer, the scene is rendered into either composer.renderTarget2 or composer.renderTarget1. In a particular example, I came across this: renderer.render( scene, camera, composer.renderTarget2, true ); renderer.shadowMapEnabled ...

What is the best way to create a visual separation between these two arrows using styled-components?

Currently, I am immersing myself in styled-components and attempting to replicate the image provided below. Although I can achieve this with CSS, I am solely focusing on utilizing styled components for this task. <Container> {sliderItems.map((item) ...

Using `preventDefault()` does not stop the action from occurring

Whenever I apply event.preventDefault() to a link, it works perfectly fine. But when I do the same for a button, it doesn't seem to have any effect! Check out the DEMO This is the code snippet in question: <a id="link" href="http://www.google.co ...

What is the method for identifying which individual element is responsible for activating an event listener?

While working on a color picker project in JavaScript for practice, I encountered an issue. I needed the #screen element to display the selected color when clicked. How can I determine which color has been clicked and pass its value to the function so that ...

Creating a SVG polygon using an array of points in JavaScript

Consider the following array containing points: arr = [ [ 0,0 ], [ 50,50 ], [ 25,25 ], ]; I would like to create an SVG polygon using this array. Initially, I thought the code below would work, but it doesn't: <polygo ...

Improving an unspecified JavaScript function

After taking inspiration from another website, I incorporated this code snippet into my project, only to find that it's not functioning properly. What could be the issue? var LessonsCustomControl = (function LessonsCustomControl_constructor(){ va ...

What is the best way to manage a batch of files in a response from an Ajax POST request?

Currently, I am utilizing the OGRE web client to convert GeoJSON text data into ESRI shapefiles by making a POST request with Ajax. var data = { "type": "FeatureCollection", "features": [{ "type": "Feature", "geometry": { "type": "Point", "coord ...