After a period of inactivity, the Angular observable object fails to trigger

I have developed a method to create an observable by designing a class that maintains the object and class observable's next() whenever there is an assignment.

class myObsClass{
private sub;
public obj;
public obj$;

constructor(){
    this.sub = new Subject<any>();
    this.obj = new Object();
    this.obj$ = this.sub.asObservable();
   }

set object (value){
     this.obj = value;
     this.sub.next(this.obj);
    }
}

In my service, I create an instance of this class like this:

public myObs = new myObsClass();

Then, in the component, I subscribe to it in the following way:

this.service.myObs.obj$.subscribe(data => {
// do something with the data
});

Initially, everything works fine. However, after being idle for about 10 or 20 minutes, the subscribe function doesn't get called at all.

What could be causing this issue? Is the approach I am using correct?

Note: The provided code is for explanation purposes only and may not function correctly if copied and pasted directly.

Answer №1

Seems like the reference to myObsClass is getting lost.

To address this issue, consider the following steps -

  1. Transform your myObsClass class into a service class using the @Inject Decorator
  2. Include it in the providers list within the module. This will establish a singleton for services that can be accessed by multiple components and services, ensuring consistent reference across all elements.
  3. Inject this service wherever it is needed.

Note: Place this service class in a commonly used module. If unsure, include it in app.module.ts.

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

Error in Angular production build due to Clean CSS failure

Encountering the following error during the code build process, any solutions? > ng build --prod --no-aot --base-href 92% chunk asset optimizationD:\myproject\node_modules\@angular\cli\node_modules\clean-css\lib&bsol ...

Navigating in Angular - directing a URL to a specific component

I am encountering an issue with redirecting my app in production mode. When I try to access the URL http://server.com/project/dashboard, the server responds with an IIS error page 404. To workaround this, I need to open the app using the URL http://server. ...

What is the best way to incorporate Firebase into an Angular 2 TypeScript application without relying on AngularFire?

What is the best way to integrate Firebase into an Angular 2 TypeScript application without relying on AngularFire? I have a simple Angular 2 application and I am looking to incorporate Firebase into it. ...

Utilizing React with .NET 8.0 and Minimal API, the front end is configured to send HTTP requests to its own specific port rather than the

Transitioning from working with react projects on .NET 3.1 to creating a new project on .NET 8.0 has been a challenging and confusing experience for me. When I attempted to access a newly created controller method, I encountered the error 404 Not Found. It ...

Create a solution that is compatible with both web browsers and Node.js

I am developing a versatile library that can be utilized in both the browser and in node environment. The project involves three json config files, with the latter two extending the tsconfig.json. tsconfig.json (contains build files) tsconfig.browser.js ...

Is there a way to modify a suffix snippet and substitute the variable in VS Code?

While working on my Java project in VS Code, I stumbled upon some really helpful code snippets: suffix code snippets Once I type in a variable name and add .sysout, .cast, or similar, the snippet suggestion appears. Upon insertion, it translates to: res ...

The modal dialog from angular/material is unable to function properly when a shape on Google Maps is clicked

I have incorporated Google Maps into my application in order to showcase shapes (polygons/circles) and markers. To interact with Google Maps in Angular, I am utilizing the type definition "npm install --save @types/googlemaps". Upon clicking a shape, I nee ...

Issue with Angular routing: Content from app.component is displaying in all components

Can anyone help me with the issue I'm having regarding showing app.component content on every component? Here is a snippet of my app.component code: https://i.sstatic.net/xcann.png I want to exclude the navbar and app-users from being displayed in o ...

Adding a personalized service into a separate service within Angular 2

I am having trouble injecting my own service into another service. While I can inject standard Angular services like Http without any issues, attempting to inject custom services results in an exception. For example, here is how MyService is set up: impo ...

What is the best way to implement i18n in an input field placeholder?

Currently, I am using inputs with placeholders in this manner: <input placeholder="Filter"> However, I need to adhere to the i18n method. Unfortunately, i18n-placeholder is prohibited in Angular 6. Can anyone suggest the correct approach to achiev ...

Utilizing Angular-built assets within Python Flask's static directory

I'm currently developing an application that utilizes Angular 7 in the frontend and Python Flask framework in the backend. I am facing a challenge where I need to integrate the compiled Angular build (dist folder) into Flask while maintaining the Flas ...

How can dependencies for an entire class or module be mocked in the mocha ecosystem similar to jest.mock?

I am currently working on unit testing a module that resembles the following code structure: import { Countdown } from "./database/orm"; export class PersistentTimer { protected constructor(...) { ... } // To ensure database writing ...

finding the parent of form controls in Angular 2 requires understanding the hierarchical structure

Is there a way to access the parent form group of a nested form group in order to retrieve a sibling control value during validation? Both controls are within a formGroup that is part of a formArray. While I am aware of the root element, I am unsure how ...

What is the best way to open and view files in an NPM dependency that do not use JavaScript?

I am facing an issue with an NPM project setup where my-config is a dependency of my-api. In the my-config project, there is a line of code that fetches the aws-config.ini file from the etc folder: instance.configs.aws = ini.parse(fs.readFileSync('./ ...

The Efficiency Issue of Angular's setTimeout

Whenever I need to update a component with different input variables, I re-render it every time because there is some specific logic in my ngOnInit() function. To achieve this, I use a method in the parent component where I toggle the showSettings property ...

The typed union type FormGroup in Angular stands out for its versatility and robustness

Within my application, users select a value from a dropdown menu to determine which type of FormGroup should be utilized. These formGroups serve as "additional information" based on the selection made. I am currently working with three distinct types of f ...

Ensuring type signatures are maintained when wrapping Vue computed properties and methods within the Vue.extend constructor

Currently, I am trying to encapsulate all of my defined methods and computed properties within a function that tracks their execution time. I aim to keep the IntelliSense predictions intact, which are based on the type signature of Vue.extend({... Howeve ...

How can an Angular 2 component detect a change in the URL?

My Angular 2 component subscribes to a service based on the URL hash without calling any subcomponents. I am wondering if I should use Route or Location for this scenario, and how can I listen for and react to a pop state event? ...

Exploring for JSON keys to find corresponding objects in an array and adding them to the table

I'm currently working on a project where I need to extract specific objects from a JSON based on an array and then display this data in a table. Here's how my situation looks: playerIDs: number[] = [ 1000, 1002, 1004 ] The JSON data that I am t ...

What is the best way to navigate through the underlying MatDialog while the MatSelect is active?

When attempting to customize the scroll behavior of a MatSelect in a regular page, I discovered that using the MAT_SELECT_SCROLL_STRATEGY injection token with the NoopScrollStrategy allows for scrolling the underlying page while keeping the MatSelect stati ...