Remove any stored data and reset to the default state when the component is destroyed, following data retrieval

I need to clear the static data upon component destruction. The data is fetched from a service and currently, I am using the same component for both adding and editing purposes. My goal is to clear the temporary static data once the user has finished editing.

export class LeadsDefaultDataService {

tempData;

private leadsDefaults = {
leads: {
  data: [
    {
      type: 'page_title',
      data: {
        title: 'Enter data',
      }
    },
    {
      type: 'page_layout',
      data: {
        backgroundColor: '#FFFFFF'
      }
    }
}
};


/**
 * Constructor
 */
 constructor(
 ) {}

 /**
  *  Function used to return the default data of qrCategory
  * @param category: Name of the category
  */
  getLeadsDefaultData(category: string) {
   return this.leadsDefaults[category].data;
  }
}

In the component:

constructor(
  private defaultData: LeadsDefaultDataService,
 ) {
}



   // For getting the data
   this.leadsData =  this.defaultData.getLeadsDefaultData('leads');


  // Reset the leadsData.
  ngOnDestroy() {
   this.leadsData = null; // not working....
  }

Answer №1

Instead of simply nulling the reference, it is recommended to expose a method in the service like the example below:

export class LeadsDefaultDataService {
 .......
  setLeadData(category: string, value: any){
    this.leadsDefaults[category].data = value;
  }
}

Then, you can call this method from the component as shown:

 ngOnDestroy() {
    this.defaultData.setLeadData('leads', null);
  }

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

Retrieve an HTML element that is a select option with jQuery

I have a select input containing different options as shown below: <select id="myArea"> <option class="myClass_1" style="color:red;" value="1">Area 1</option> <option class="myClass_2" style="color:green;" value="2">Area 2& ...

Fade In Effect in Angular 2 Using SwitchCase

Hi everyone, I'm facing an issue with making my switch cases fade in after one is called. Here's what I have so far. When the correct switch case is entered in the input field, I want the current one to fade out and the new one to fade in. How ...

Encountering a problem when attempting to iterate through Observable Objects in Angular 2

I've hit a roadblock trying to iterate through the observable object in my users service. The error thrown by Chrome's console is: error_handler.js:47 EXCEPTION: undefined is not a function Below is the code causing the issue: users.compone ...

Implement a CSS rule when the menu is in an open state

Is there a way to modify the color of the hamburger icon when the menu is open? I'm unsure on how to approach this. My assumption is that I need to check if the 'active' class is present and then apply specific CSS code. You can view the s ...

Why is Angularfire2 failing to save the data it fetches?

It seems that I am struggling to accomplish what I need because of a lack of knowledge on the proper method. My goal is to save a connection between a user and a school (which is also a user), and then retrieve some image URLs from the school user in a new ...

Expanding box geometry from a single side in Three.js

Just starting out with three.js and my first task was to create a box geometry that could be increased from only one side. Issue : When increasing the width or height of an object, both sides automatically expand. Check out this jsFiddle Example I waste ...

Incorporating design elements specific to an anchor tag

I have a list of links (li) with one, two, or three li elements in the ul. Each li contains an <a> tag with text or icons. Below are some code examples: <ul> <li><a href="#">prev</a></li> <li><a href="#" ...

Tips for showcasing content in a specific component area on Joomla:

Recently, I created a search module in Joomla that looks up users. However, I've run into an issue where it's displaying the content within the same module instead of at the component position like I intended. It's worth noting that I'm ...

Is there a way to prevent jQuery.ajax() from displaying errors in the console?

I have set up a jQuery JSONP request to monitor the status of a resource based on its URL. In case the resource is not accessible or the server goes down, my ajaxFail() function takes care of updating the display. function fetchServerStatus(service, host) ...

Wrap every character in a span tag within this text

Extracting search strings from an object obj[item].coveredText and replacing each character with a span is what I aim to achieve. Currently, I can only replace the entire search string with a single span element. Any suggestions would be greatly appreciat ...

Issue with jQuery's new Date() function in Safari

This script is designed to determine a person's age based on the input parameters. var now = new Date(); var past = new Date(select_year + "-" + select_month + "-" + select_day); var nowYear = now.getFullYear(); var pastYear = past.getFullYear(); va ...

Client side is receiving an unexpected format from the pyramid when using the __json__ method

As I'm configuring a Pyramid back-end along with an Angular front-end application, I encounter an issue. When Angular sends an http GET request to Pyramid, the data received on the Angular side is not as expected. It seems like the id is being recogni ...

Techniques for transferring form data from JavaScript to Java

Currently in my application, I have a signup form and I am facing an issue with storing the data in the backend. Since I am not well-versed in the backend development, I am struggling with this task. I'm using Netbeans 7.0 as my IDE and MySQL 5.6 for ...

Passing parameters when rendering a template in Ember.js

Is there a way to pass a parameter from a template to a controller or route in Ember? <script type="text/x-handlebars" data-template-name="plan"> <table class="table table-bordered"> <thead> <tr> <th>Truck Number</th> ...

What is the best method to find a matching property in one array from another?

I am working with two arrays in TypeScript. The first one is a products array containing objects with product names and IDs, like this: const products = [ { product: 'prod_aaa', name: 'Starter' }, { product: 'prod_bbb&apos ...

The issue with type checking being disrupted when importing from a TypeScript file

I have a TypeScript file containing an openapi object schema constant: export default { "title": "Draft", "description": "A new draft listing", "type": "object", "additionalProperties ...

Retrieve the text value of all dropdown options in an Angular reactive form

Despite my extensive search and experimentation with Copilot, I was unable to find the solution. I have a dynamic reactive form with multiple dropdowns (1 to n). Whenever a dropdown is changed, I need to iterate through all existing dropdowns to retrieve ...

AngularJS $scope variable issue

After searching online, I found this code snippet that I tried to implement, but unfortunately, it's not displaying any data. Below is the HTML code: <html data-ng-app=""> <head> <title>Example 4: Using AngularJS Directives an ...

Expanding and collapsing accordion using jQuery to handle dynamic data

I am trying to implement functionality where I have dynamic data and when I click on a button, an accordion opens and closes. The challenge is that only one accordion should be open at a time, closing any previously opened accordions. Currently, my scrip ...

Disable the default behavior of the current window when clicking a link using the ctrl key or middle mouse button

When trying to create a navigable link using an onclick event on a div, everything goes smoothly until you attempt to open the target in a new tab with ctrl+click or middle-mouse click. It seems that both a new tab and the current tab are opened simultaneo ...