The issue of binding subjects in an Angular share service

I established a shared service with the following Subject:

  totalCostSource$ = new Subject<number>();

  shareCost(cost: number ) {
    this.totalCostSource$.next(cost);
  }

Within my component, I have the following code:

  private incomeTax: number = 18;
  income: number;

  constructor(private costService: CostService) { }

  ngOnInit() {
    this.costSubsription = this.costService.totalCostSource$.subscribe( cost => {
      this.income = cost * this.incomeTax / 100;
      console.log(this.income); // displays correct value in console
    });
  }

However, I am facing an issue with updating the income variable in my view. Even though the correct value is displayed in the console, the view does not refresh. How can I resolve this problem?

Answer №1

@johndoe32 I can't provide a definitive reason without seeing the template or component that invokes shareCost.

Here are some troubleshooting steps:

  • Ensure that shareCost is being called after totalCostSource$.subscribe
  • If you are using onPush or have detached change detection, consider manually detecting changes
  • Verify that subscribe is returning a valid value of type number

If these steps don't resolve the issue, please provide:

  • The HTML Template where income is referenced
  • The Typescript code for both components (the one calling shareCost and the one subscribing to subject)

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

Having difficulty with installing the ttf-loader for React with Typescript

Currently, I am working on a project using React with TypeScript and trying to incorporate the font feature in react-pdf/renderer. The font has been successfully imported and registered as shown below: import { Text, View, StyleSheet, Font } from "@re ...

Polling with RxJs, handling errors, and resetting retryCount with retryWhen

I am currently working on setting up a polling strategy that functions as follows: Retrieve data from the server every X seconds If the request fails, show an error message: "Error receiving data, retry attempt N°"... And retry every X seconds for a maxi ...

Listening for combinations of keys pressed using HostListener

I've been attempting to detect when a user presses the Shift+Tab key combination on the keyboard, but for some reason I can't get the event to trigger. @HostListener('keyup', ['$event']) @HostListener('keydown', [&a ...

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 ...

Utilizing a React npm component within an Angular project: A step-by-step guide

After successfully creating a simple react component and publishing it to the NPM registry, I encountered an issue when trying to use the same plugin in an Angular project. The custom plugin can be found at: https://www.npmjs.com/package/reactcustomplugin ...

Achieving a consistent scroll value using RxJs

I have a block with a mat-table inside, which has an initial scroll value of 0. I am trying to achieve a scenario where the scroll value changes automatically to 2 or more when you reach a height of 0 and again changes back to 2 when scrolled to the final ...

Angular 7 form does not automatically disable the button upon initialization

My current challenge involves disabling a button until a form is completely filled out. Surprisingly, everything works perfectly in Chrome and Firefox, but IE11 seems to be causing some issues. Below is the relevant code snippet: <div class="col-12"> ...

Typescript mistakenly labels express application types

Trying to configure node with typescript for the first time by following a tutorial. The code snippet below is causing the app.listen function to suggest incorrectly (refer to image). import express from 'express'; const app = express(); app.li ...

Using the mat-icon within several mat-select components

How can I resolve the issue with displaying mat-icon in a mat-select(multiple) field? After adding a mat-icon and selecting an option, the mat-icon value also appears in the selected values. Please see the attached images for reference: mat-select-list s ...

Uncovering the Full Scope of a LinkedIn Profile with Typescript

Hello, I am currently in the process of developing an Ionic2 framework app that includes social login functionality. Up to this point, I have successfully integrated Google Plus and Facebook buttons. Now, I would like to add LinkedIn login as well. The c ...

The parameter 'CallHistoryMethodAction<[string, unknown?]>' does not match the 'UserActionType' parameter

Using a development environment with React, TypeScript, and connected-react-router. My Intention: I aim to utilize the router action asynchronously within the user action. After successful login, I want the application to navigate to the main screen. Err ...

When working with data in Angular, make sure to use any[] instead of any in app.component.html and app.component.ts to avoid causing overload errors

I'm new to working with Angular, specifically using Angular 15. I have a Rest API response that I need to parse and display in the UI using Angular. To achieve this, I employed the use of HttpClient for making GET requests and parsing the responses. ...

What steps can be taken to properly set up routing in Angular 4 in a way that organizes feature-modules routes as children in the

Organizational layout of projects: /app app.module.ts app.routing.ts : : /dashboardModule /manage-productModule manage-product.module.ts manage-product.routing.ts Within 'app.routing.ts' [ { path : '&a ...

Contrasting expressEngine and ng2engine: An In-depth Comparison

I am currently utilizing the universal-starter framework. In regards to the file server.ts, I noticed that making the switch from import { expressEngine } from 'angular2-universal'; app.engine('.html', expressEngine); to import { n ...

What is the process for uploading an image with express-fileupload?

Looking to upload an image to Cloudinary via Postman using the express-fileupload library for handling multipart forms. Here is a snippet from my index.ts file: import fileUpload from "express-fileupload"; app.use(fileUpload()); In my controller ...

What steps should I follow to integrate the NextUI Tab component in my NextJS project?

Hi everyone, I am new to NextJS. I recently set up a basic NextJS starter project with NextUI by using the command npx create-next-app -e https://github.com/nextui-org/next-app-template. Now, I am trying to add a tab group with 3 tabs to the default page. ...

Guide to incorporating third-party libraries in Angular

Greetings, I have a common question regarding Angular and utilizing third-party libraries. As someone who does not frequently work with Typescript/Frontends, I am encountering an issue with Angular. Specifically, I am attempting to incorporate the node-htm ...

Is it advisable to switch all properties to Angular Signals?

Recently, I've been utilizing signals to replace certain properties in my components that would typically require computed logic or be reactive to the effect hook. It got me thinking - should I be replacing all of my properties with signals, even if t ...

Setting up tsconfig.json to enable support for either string literals or string templates involves adjusting the compiler options

After utilizing swagger codgen with the typescript-aurelia template to create API code, I noticed that a significant amount of string literals were being used in the resulting code. Despite encountering errors when running the transpiler tsc from the comma ...

Troubleshooting Authorization Header Issue in Angular 5

I created an Interceptor to include an Authorization token in all HTTP Requests, but unfortunately it's not functioning as expected. I've double-checked my code and everything seems correct, so I'm wondering if there's something crucial ...