Is there a way to detect changes in a Service variable within an Angular component?

One of my components contains a button that activates the showSummary() function when clicked, which then calls a service named Appraisal-summary.service.ts that includes a method called calc().

showSummary(appraisal) {
  this.summaryService.calc(appraisal);
}

The Appraisal-summary.service.ts service looks like this:

calc(appraisal) {
  ...
  //an array called 'scores' is created (synchronously)
  return this.scores;
}

I am trying to figure out how to detect the synchronous result this.scores and use it to trigger a function in a completely separate component named summary.component.ts (which has already been initialized) that will utilize scores.

For example, something like this in summary.component.ts:

ngOnInit(): void {
  service.subscribe(scores => this.data = scores)
}

Answer №1

In order to ensure the smooth operation of your AppraisalSummaryService.ts, it is highly recommended to incorporate a Subject in the following way:

import { Subject } from 'rxjs';

...
export class AppraisalSummaryService {
    // Assuming 'scores' is an array of type number
    public scoreSubject = new Subject<number[]>(); 
    
    calc(appraisal) {
      ...
      // An array 'scores' is created synchronously
      this.scoreSubject.next(this.scores); // Emit the result of the scores
      return this.scores;
   }
}

Moreover, in a separate component, within the ngOnInit method, it is essential to subscribe to this result:

import { Subscription } from 'rxjs';
....
export class YourOtherComponent implements OnInit, OnDestroy {
   private subscription: Subscription;

   constructor(private appraisalSummaryService: AppraisalSummaryService) {}

   public ngOnInit(): void {
     // Save the subscription instance
     this.subscription = this.appraisalSummaryService.subscribe((scores: number[]) => {
       console.log(scores);
    });
   }
   
   public ngOnDestroy(): void {
     // Unsubscribe to prevent memory leaks
     this.subscription.unsubscribe();
   }
   
}

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

Not every child within a transition group in Vue.js is currently engaged in animation

This is the specific transition group that I have implemented <article class="hotel-row" v-for="hotel in paginatedHotels" :key="hotel.hotelid"> <search-hotel :hotel="hotel"></search-hotel> </article> If I do not assign unique ...

I'm struggling to grasp the concept of State in React.js

Even though I'm trying my best, I am encountering an issue with obtaining JSON from an API. The following error is being thrown: TypeError: Cannot read property 'setState' of undefined(…) const Main = React.createClass({ getInitia ...

Tips on informing the TS compiler that the value returned by a custom function is not null

There might be a way to make this code work in TypeScript, even though it's currently showing some errors regarding possible undefined values. Take a look at the code snippet: const someArray: foo[] | null | undefined = [...] // TS fail: someArray ...

Insert an HTML page into a div element

I am having an issue with my angular template. I have a div where I am attempting to load an HTML view file (.html) based on a $watch event, but for some reason, the HTML view is not being loaded into the div. Below is a snippet of my controller code that ...

Empty body detected in Jquery AJAX request with Django REST running in a Docker environment

Using JavaScript to load a template called index.html from the /static directory. The JavaScript code in app.js: var obj = new Object(); obj.startTime = "123"; obj.endTime = "456"; console.log("fetchNext "+JSON.stringify(obj)); v ...

Utilizing distinct useState for mapped elements

I am struggling to find a solution on how to pass specific useState states to respective mapped elements. export const Polska = () => { const [riverVisible, setRiverVisible] = useState(false) const [mountainVisible, setMountainVisible] = useState(fa ...

Implementing real-time style changes with Angular 6 through Environment Variables

Attempting to dynamically change styles in Angular 6 using environment variables has been a success for me. Here is how my file structure is organized: src -app -assets -environments -scss -theme1.scss -theme2.scss -_variables.scss -styles.sc ...

``There seems to be an issue with the redirect header function in the PHP

Setting up my test site on a local host, I included an ajax request in one of my java-script files to a php script. if(hIF == "true"){ $.ajax({ type: "POST", url: "log_in/login.php", data: {name: userName, pwd: password}, ...

How to Retrieve Information from an Array in VueJS

At the moment, the data being displayed on my page is an array, as shown in the snippet below: https://i.stack.imgur.com/zAvrc.png However, I only want to retrieve or display the project names. This is all I have at the moment: fetch(context,id){ ...

THREE.JS: Organizing Objects into Multiple Groups

Currently, I am in the process of learning THREE.js and attempting to create a playable Rubik's cube. My goal is to rotate a face as a whole instead of manipulating each cube individually. I have tried placing the cubes within a THREE.Group, but the ...

Tips for managing page navigation and incoming links on a site that uses only ajax technology

Currently, I am in the process of developing a fully ajax-based website which presents a challenge - the inability to provide direct page links. To address this, I have implemented a functionality where the page name gets appended to the URL each time an a ...

Syntax error encountered with the null-coalescing operator (`??`)

Encountering Syntax Errors After Upgrading Angular Plugin I am facing some syntax errors after attempting to upgrade a plugin in a system that was originally developed by someone else. Although I am relatively new to Angular, I tried to simply replace the ...

How can I transfer information from an HTML file (using the ejs template engine) to Node.js?

Currently, I am working on my own project using a combination of Node.Js (Express), MongoDB, JavaScript/jQuery, and HTML with EJS as the template engine. So far, I have some understanding of how to send data from the Node.js router to views and how to sen ...

Creating a model and assigning values in TypeScript

I am currently developing an angular application and need to send data to a post API. The JSON structure I am working with is as follows: { "name": "julie", "id": 1, "PersonalDetails": { "hom ...

What is the best way to use Jquery ScrollTo() to navigate to an element on a page using a class selector

Building on the information from this source, I have a question: How can I resolve the same issue using a class selector like $('.class')? I am encountering an error message that says Uncaught TypeError: undefined is not a function This occurs ...

Angular template variables in VS Code now have the ability to automatically update their names when renamed

Here is a snippet from the controller: /* Local copies of Enumerators to use on template */ MeasurementOriginEnum: typeof MeasurementOriginEnum = MeasurementOriginEnum; And here is how it is used in the template: <button *ngIf="element.getMeasure ...

javascript - Convert a string into a JSON object

Looking for assistance here as I am fairly new to this. My goal is to transform the fullName string returned from a webapp UI using Selenium WebDriverIO. Here's what I have: const fullName = "Mr Jason Biggs"; The desired outcome should be structured ...

Is the communication between Angular service and component failing when using ngFor?

I am currently using Angular to create a video game page. When a specific title is clicked, the id is sent to make an API call with that specific id. I am able to retrieve the data in the selected-games component where I intend to use it, but when I use ng ...

Are there any risks associated with using nested setTimeout functions with the same name?

While reviewing the source code of typed.js, I noticed that the main function in this plugin utilizes a design pattern with multiple setTimeout functions nested inside one another. Here is a snippet of the code: self.timeout = setTimeout(function() { / ...

Tips for accessing a specific value within an array of objects using a key

Is there a way to retrieve the value in an object array based on a key that is present within the same array? The structure of the object array is as follows: const objectArray = [ {key: "1", value: "12321"}, {key: "2", value: "asdfas"} ] For ex ...