tips for fetching information from sources beyond observable patterns

Is there a way to retrieve the value of this.dealType outside of the this.trasactionService.transactionEvent$ subscription? I need to access the data and value of this.dealType elsewhere, any help would be appreciated.

While it has a value inside the this.trasactionService.transactionEvent$.subscribe method, I am struggling to access it outside. Even when using console logs, the value appears empty.

I thank you in advance for your assistance.

#code

export class DealsApprovalComponent implements OnInit {
  dealType: string;
  totalDealsForApproval = 0;
  constructor(
    private dealService: DealService,
    private notificationService: NotificationService,
    private trasactionService: TransactionService,
    private route: Router,
    private dealTransactionService: DealTransactionService
    
  ) 
  { 
  }
  ngOnInit(): void {
    this.trasactionService.transactionEvent$.subscribe((data) => {
      if(data) {
        switch (data['operation']) {
          case 'deal/deal-type':
          this.dealType = data["dealType"];
          break;
        }
      }
      },
      (error) => {}
    );

    console.log("this.dealType" , this.dealType)
  }

Answer №1

The reason why the console log appears empty is because it gets executed before the code inside the subscribe method. To work with "this.dealType", you can simply create a separate method that will be called after assigning the value.

ngOnInit(): void {
  this.trasactionService.transactionEvent$.subscribe((data) => {
    if(data) {
      switch (data['operation']) {
        case 'deal/deal-type':
          this.dealType = data["dealType"];
          this.doSomething();
          break;
      }
    }
    },
    (error) => {}
  );
}

private doSomething() {
  console.log(this.dealType);
}

Additionally, make sure to unsubscribe when necessary in order to prevent memory leaks.

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

A step-by-step guide on simulating a click event on an element in React with the help of jest and react-testing

My component displays the following {list.options && list.options.length > 0 ? ( <div data-testId="MyAlertText" onClick={onAddText}> Add Text </div> ) : null} When testing, I am executing the following it('Ensure Add Text lin ...

I constantly encounter the error message "Unable to access properties of undefined (reading 'map')"

I am in the process of using Nextjs 13 for developing my front end and I have a requirement to fetch a .json file from a URL and utilize it to populate my website through server side rendering. However, I keep encountering an error saying "Cannot read prop ...

An unexpected type error occurred: Unable to read the undefined property 'map' when utilizing Highcharts

I am currently working on developing highcharts using data from Firebase. I came across a helpful example here: However, when I try to integrate it into my application, I encounter the following error: firebase.js:43 Uncaught TypeError: Cannot read pr ...

Utilizing Ngrx store for Reacting form validation with the integration of asynchronous validation

I'm currently working on an Angular 8 project where I aim to showcase form errors through NgRx store while utilizing reactive forms with a custom asynchronous validator. login.component.ts @Component({ selector: 'auth-login', templateU ...

Adding images to chart labels in vue-chartjs explained

I'm facing a challenge in adding flag icons below the country code labels, and I could really use some guidance. Here is an image of the chart with my current code The flag images I need to use are named BR.svg, FR.svg, and MX.svg, located under @/a ...

tying [inactive] to a specific attribute

I have successfully implemented the functionality to disable the button when the email is in the correct format, as shown in my code below. Now, I am looking to implement the following scenario: The Get Started button should be disabled by default If a u ...

Creating dynamic and asynchronous JSON structures with JavaScript

Struggling with async JavaScript here. I've got a function called within a jQuery AJAX function, and it looks like there are more async method calls in that function. Currently stuck in this situation. Here's the code snippet triggered by the jQ ...

Unexpected Error: Unable to access the 'position' property of an undefined element (D3.JS)

This error occurred when I attempted to fetch JSON data and convert it into a line graph. An unexpected TypeError was thrown: Unable to access the 'position' property of undefined Below is the relevant portion of the JS code: d3.json("../js/ ...

Issue with deactivating attribute through class name element retrieval

There are multiple input tags in this scenario: <input type="checkbox" class="check" disabled id="identifier"> as well as: <input type="checkbox" class="check" disabled> The goal is to remov ...

Changing the color of a Highcharts series bar according to its value

Playing around with Highcharts in this plunker has led me to wonder if it's possible to dynamically set the color of a bar based on its value. In my current setup, I have 5 bars that change values between 0 and 100 at intervals. I'd like the colo ...

What is the method for accessing the object in an API and updating it using jQuery?

Explanation - There are 4 selects, each choice triggers an ONCHANGE enabled function that passes the value into the Wikipedia API URL. The issue - Every time I select a different option, I want the corresponding example to appear in the title: wiki.query. ...

Issue with Material UI components: The Select component is collapsed and the autoWidth functionality is not

The Material UI (React) Select component is not expanding in width as expected, even with the autoWidth property. https://i.sstatic.net/h3H0V.png <FormControl margin="dense"> <InputLabel id="prefix-label">Prefi ...

I'm curious if the response order will mirror the URL order in my situation

QUERY: Upon reviewing the following link: Promise.all: Order of resolved values I am doubtful about its relevance to my specific scenario. Can I always expect responses to be in the same order as urls? EXAMPLE: var urls = []; for (var i = 0; i < d ...

Load an external script once the page has finished loading by leveraging the power of $(document).ready() in conjunction with $.getScript()

Is it possible to load a script in the header of a website instead of at the bottom? I've been trying but it's not working as expected. Here is an example of what I'm attempting: HTML file: <!DOCTYPE html> <html lang="en"> < ...

What is the best way to verify a list in a MongoDB schema?

I am currently working on a home collection validation project that involves different room types (double, single, ensuite). The validation process should allow for the addition of all the listed room types. "rooms.type": {bsonType: ["ensuite", "double", ...

The attribute 'selectionStart' is not a valid property for the type 'EventTarget'

I'm currently utilizing the selectionStart and selectionEnd properties to determine the beginning and ending points of a text selection. Check out the code here: https://codesandbox.io/s/busy-gareth-mr04o Nevertheless, I am facing difficulties in id ...

angular form validation methods

I am having issues with validating the form below. The required validation message is not appearing for my input type="file" field, even though the validation works well for my other textboxes. How can I validate the input as a required field? Please see ...

Is it possible to switch between mat-checkbox and mat-radio-button within an Angular reactive form?

As I develop a quiz application, I face the challenge of dynamically switching between mat-checkbox and mat-radio-button based on the number of answers for each question. For instance, Question #1 is a single choice question and utilizes mat-radio-button, ...

Ensure that test cases in Angular2 include a line that covers conditions for returning values

I'm having trouble implementing test coverage for an online platform, as I'm not sure how to approach it. Within my service method, I have the following code: public getResults() { return this.http(url,body).map(this.mapResponse); } private ...

Encountering a 500 internal server error while attempting to submit data to a Laravel project through Axios in Vue.js

I encountered an issue while attempting to send data to my Laravel application using Axios in Vue. The error I received was: Error: Request failed with status code 500 at e.exports (axios.min.js:8) at e.exports (axios.min.js:8) at XMLHttpReque ...