What is the best way to ensure that the client_id chosen in the initial component remains intact during navigation?

Two distinct components are interacting with each other.

  1. I create an invoice, input data, select a client name, and click on Add Product.
  2. I add a product and navigate back to the invoice component. Upon navigation, the client name gets deleted.

I have found a solution for other data in the invoice component, but I am facing an issue with the client data.

To address this, I created a data service with the following code:

export class DataService {
  _data = new Map<string, any>();

  setData(key, value) {
    this._data.set(key, value);
  }

  getData(key) {
    return this._data.get(key);
  }

  clear() {
    this._data = new Map<string, any>();
  }
}

In the InvoiceComponent, I implemented the following code:

client: Client[];

    {
        // Code implementation
    }
     ngOnInit() {
      // Implementation of logic
     }
      saveData() {
        // Saving data logic
      }
      onSelect(clientId) {
        // Selecting client logic
      }

All data displays correctly except for the client information.

To handle the client_id, I updated my HTML code as follows:

HTML snippet:

  {/* Updated HTML code */}

Any suggestions or ideas?

Thank you

Changes:

I revised my HTML code to include the modifications below:

 {/* Updated HTML code */}

In the TypeScript code, I made the following changes:

   {/* Updated TypeScript code */}

Answer №1

Trigger onSelect function within ngOnInit() when the client id is present

ngOnInit() {
    this.ws.getAllClients().subscribe(
      client => {
        console.log(client);
        this.client = client;

        if (this.ss.getData('clientid')) {
          const clientId = this.ss.getData('clientid');
          onSelect(clientId);
        }
      }
    );
 }

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

Guide on transferring map-marker from mapclick event to a function within the google-map component

I am currently encountering some difficulties when attempting to open a map-info-window within the Google Map component in an Angular 14 project using the guidelines provided here. For this task, I am utilizing the Google Maps package for Angular available ...

I'm struggling to make basic CSS work in my Next.js 13 project. I'm a beginner, can someone please help?

I am facing issues with the default CSS in my latest project. I have a file called page.modules.css and I am using classname = styles.style page.tsx import styles from'./page.module.css' export default function Home() { return ( <div cl ...

The getStaticProps() method in NextJS does not get invoked when there is a change in

I have integrated my front-end web app with Contentful CMS to retrieve information about various products. As part of my directory setup, the specific configuration is located at /pages/[category]/items/[id]. Within the /pages/[category] directory, you w ...

Child component in Angular 2 that verifies the parent component

My goal is to have a component behave differently depending on its parent component. For example, in the scenarios below, the child component would exhibit slightly different behavior. Scenario A <parent-a> <child></child> </parent-a ...

What limitations prevent me from using "await .getAttribute()" in Protractor, despite the fact that it does return a promise?

I have been working on transitioning my Protractor tests from using the selenium control flow to async/await. However, I am facing an issue where it is not allowing me to use await for the .getAttribute() function. Each time I try, I receive the error mess ...

Constantly receiving an undefined value when trying to access a variable in an ngrx Observable

Here is the code snippet I am working with: language.component.ts form: FormGroup; first: AbstractControl; second: AbstractControl; constructor(private _fb: FormBuilder) { this.first = new FormControl('', [Validators.required, Va ...

TSLint in TypeScript showing unexpected results

In the process of developing a project using Angular, I recently made the switch from VS Code to WebStorm. Unfortunately, I'm encountering some difficulties that I can't seem to make sense of. To ensure everything is functioning correctly, I perf ...

The union type consisting of String, Boolean, and Number in type-graphql has encountered an error

I attempted to create a union type in type-graphql that represents the String, Number, and Boolean classes, but unfortunately, it was not successful. Does anyone have any suggestions on how to achieve this? export const NonObjectType = createUnionType({ ...

Why is my Angular 2 service not showing up in my application?

Trying to access a JSON file using an Angular service has been unsuccessful. While I can easily read and bind the JSON data without the service, attempting to do so with the service results in an error message: Failed to load resource: the server responde ...

Comparing Redux and MVC models in software architecture

A new project is on the horizon, and the Product Owner has suggested using Redux for state management. However, I am hesitant to embrace this suggestion as I fail to see the advantages compared to a model-based approach. For instance, instead of utilizin ...

Displaying data in a table using ngFor and implementing sorting capabilities

I'm using an mat-accordion with ngfor to display panels that contain tables. The issue I'm facing is that the Mat sort functionality only works for the first table. I've read that I need to use a template reference variable inside each table ...

Is there a way to link the scrolling of two ag-grid data tables together for synchronized movement?

I have integrated ag-grid into my Angular project and I am looking to display two data tables (ag-grid) stacked on top of each other. Both data tables should scroll together, meaning when I scroll in table 1 or table 2, the content of both tables should m ...

Sending data using the HTTP POST method in an Angular application

Currently, I am working on setting up a POST request in Angular and have the following code setup: const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', }) }; In the code below, it shows how to f ...

Execute a function at a designated time without having to open the application

Currently in the process of developing a .NET Core application with Angular and Ignite UI. I was wondering if there is a way to execute a function in the background without requiring the webpage to be open. For instance, would it be feasible to automatica ...

Leveraging the (click) event within an HTML template to manage a [hidden] element located in a different template using Angular 2

Within my project, I have two TypeScript files, each containing HTML templates inside the @Component. In one of the templates, there are info cards that can be collapsed or expanded using [hidden]="collapsed". The following function is present in both file ...

Tips for including additional properties to a <button> element using ReactJS and Typescript

Currently, I am in the process of creating a unique component which consists of an ordinary <button> tag and has a new prop called aria-current. The issue at hand is that Typescript is flagging an error stating that this property does not exist with ...

When using Jest + Enzyme to test a stateful class component, encountering problems with Material-UI's withStyles functionality is a common issue

I have a React + TypeScript application with server-side rendering (SSR). I am using Material-UI and following the SSR instructions provided here. Most of my components are stateful, and I test them using Jest + Enzyme. Below is an example of one such com ...

Ways to resolve the TypeScript reference issue

I am encountering a TypeScript error in the code snippet below, even though I specified it as Record<"abc", string>? interface IFoo { key ?: | string | Record<"abc", string> | boolean | string[] } const tes ...

Toggle the visibility of columns in Vaadin-grid with a click method using Angular 2

In my Angular2 project, I have a vaadin-grid component with columns for firstname, lastname, age, city, and country. I want to add functionality to show or hide the lastname column when the user clicks on the firstname column header. Can anyone help me ach ...

implementing an event listener in vanilla JavaScript with TypeScript

Can anyone help me figure out how to correctly type my event listener in TypeScript + Vanilla JS so that it has access to target.value? I tried using MouseEvent and HTMLButtonElement, but I haven't been successful. const Database = { createDataKeys ...