Will the subscription be automatically removed once the value is resolved?

While examining some code, I stumbled upon the following snippet:

this.busy = this.service.getInfo().subscribe((info: InfoData[]) => {
            this.setInfo(info);
        });

The property busy is defined within a component and of type boolean, it serves as an input value for the [ngBusy] directive. The subscribe() method returns a Subscription object, which is not null and therefore cast to true. This action triggers the directive to display a modal loading popup, which disappears once the info is resolved. Hence, at that point, when this.busy becomes false, it indicates that the Subscription object no longer exists.

Within the getInfo() method, there is only one line: return Observable.of(info), where 'info' is a temporary variable.

Therefore, my query is: Is the Subscription automatically deleted after the data is resolved? If so, does this behavior apply only to Observable.of(), or are there other instances of such behavior?

angulartypescriptrxjsobservable

Answer №1

Does a Subscription get deleted immediately after the data is resolved?

No, it doesn't. - The subscription object will still remain because in JavaScript, an object cannot delete itself. You can review the code below to verify that the subscription object persists even though it's no longer connected to the stream.

If you are using angular2-busy, you might want to refer to the documentation as [ngBusy] is designed to recognize when a subscription object is closed and stop displaying the busy indicator.

In the provided code snippet, you can observe that at the end of the subscription, it continues to exist but in a closed state - angular2-busy is able to handle this scenario effectively.

const of$ = Rx.Observable.of("Test");

let sub = of$.subscribe();

// the subscription will automatically close, but it won't be set to "undefined" or "false"
console.log(sub);
<script src="https://unpkg.com/rxjs/bundles/Rx.min.js"></script>

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

Angular 7's URL updates, but no other actions take place

I am new to posting here and feeling quite desperate. Currently, I am working with Angular 7 and facing an issue. The problem arises when I manually enter the desired URL, everything works perfectly. However, when I use RouterLink by clicking a button, the ...

javascriptangulartypescriptangular-ui-routerangular7

Issue: An error occurred while trying to parse JSON data in TypeScript due to an undefined 'description' property

Encountering an error message when attempting to retrieve the description attribute from the following Sample Json. Error: TypeError: Cannot read property 'description' of undefined when trying to access json data in typescript import {Age ...

jsontypescript

Using template references in ViewChildren

I'm facing an issue trying to utilize ViewChildren to create a QueryList from TemplateRef, but I am unable to pass it to the input component. For instance: Component.ts: @ViewChildren(TemplateRef) cellTemplates: QueryList<TemplateRef<any>& ...

angulardomangular8viewchild

Issues with anchor tag click event in Firefox browser not functioning as expected

I have encountered an issue while trying to create an anchor tag in a TypeScript file. When clicking on this button, the anchor tag should be created. This functionality is working correctly in Chrome and IE, however, it seems to be not working in Firefo ...

javascriptangulartypescript

Refining strings to enum keys in TypeScript

Is there a method to refine a string to match an enum key in TypeScript without needing to re-cast it? enum SupportedShapes { circle = 'circle', triangle = 'triangle', square = 'square', } declare const square: string; ...

typescript

Loading Angular 4 Material Tabs when a tab is selected

Can lazy loading be implemented with Angular Material Tabs? If not, I am looking for a solution to execute a method when switching tabs. ...

angularangular-materialangular-material2

Utilizing the String Enum for mapping an interface with an index

Using Typescript, I aim to make use of my string enumeration: export const enum MutationKeys { registerUser = 'registration/REGISTER', registerUserCompleted = 'registration/REGISTER_COMPLETED' } This allows the string values t ...

typescript

Ways to fix: Encountering an Unexpected token < in JSON at position 0

Hey there! I've just started dipping my toes into the MEAN stack. I'm currently using Angular to connect to an api.js file, which in turn connects to my mongodb database. However, I've come across this error: ERROR SyntaxError: Unexpected t ...

javascriptjsonmongodbangular

Challenge with Angular dependencies: Transitioning from Windows to Linux

I'm facing a challenge with hosting an Angular application on Linux for a client. The application runs smoothly on Windows where the customer develops it. My NodeJS version is 19. Upon running npm install, I encountered this error message: npm notice ...

node.jsangularangularjsnpm

Enriching Angular Tables with Custom Buttons and Actions using ng2-smart-table

I am struggling to customize the button styles in ng2-smart-table. I have tried changing the code following the steps provided in the link below, but the buttons are still not appearing as desired. Specifically, I want to update the "Edit", "Delete", "Canc ...

angularng2-smart-table

What is preventing me from retrieving data from a modal in Ionic/Angular?

I'm currently in the process of designing a modal that allows users to input a quantity for an item using a form. The functionality is working as intended, but I am encountering an issue with getting the server data back into the page. Despite my bes ...

angularionic-framework

Avoid printing employees whose ID begins with special characters

My C# API sends all employee information from the database to my Angular web app. I need to filter out employees with IDs starting with '#' in Angular. Employee = Collaborator Below is the Angular service code that calls the API to fetch the d ...

htmlangularangularjstypescriptapi

Mastering Generic Types in Functions in Typescript

My current structure looks like this: export interface Complex { getId<T>(entity: T): string } const test: Complex = { getId<Number>(entity){return "1"} // encountering an error 'entity is implicitly any' } I am wondering w ...

javascripttypescript

Typescript encountering issues with addEventListener

const [status, setStatus] = useState<string>("pending"); const updateStatus = (newStatus: string) => { setStatus(newStatus); }; useEffect(() => { window.addEventListener("updateProtocol", updateStatus); return () =&g ...

typescriptreact-hooksaddeventlistener

Make sure a Typescript array contains a particular value

Currently, I am in the process of developing a dropdown-style component where the value and options are separate props. My goal is to incorporate Typescript to ensure that the value remains a valid option. Although I could perform this validation at runtim ...

typescripttypescript-generics

Vercel: Failed to create symbolic link, permission denied

I have my personal repository available at https://github.com/Shrinivassab/Portfolio. I am currently working on developing a portfolio website. However, when I attempt to execute the vercel build command, I encounter the following error: Traced Next.js ser ...

reactjstypescriptbuildnestjsvercel

Leverage images within the Angular library

I am currently working on creating an Angular library that includes a component with an image. I have successfully added the image as an asset in the library, but when trying to display it, the image doesn't show up. Here is the current folder structu ...

angularassets

What classification should be given to children when they consist solely of React components?

I'm encountering an issue where I need to access children's props in react using typescript. Every time I attempt to do so, I am faced with the following error message: Property 'props' does not exist on type 'string | number | boo ...

reactjstypescript

Is there a way to export a React component in TypeScript that is styled using Material-UI's withStyles?

I have created a React component using TypeScript that implements Material-UI style for react-select, as demonstrated below. const styles = (theme: Theme) => createStyles({ }); export interface Props<TI> extends WithStyles<typeof styles, true ...

reactjstypescriptmaterial-ui

Preflight request response failed access control check due to absence of 'Access-Control-Allow-Origin' header

I encountered an error while attempting to upload a file and store it in a database using Angular4 as the front end. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the ...

angularspring-boot