One way to consolidate multiple components in a single location without altering user-input data

I currently have 3 separate components, namely PersonalInfoComponent, EducationalInfoComponent, and ExperienceComponent. These components are all being displayed within the ResumeComponent.

The issue I am facing is that when a user enters information in the PersonalInfoComponent, moves to the EducationalInfoComponent, and then returns to the PersonalInfoComponent, the data gets refreshed. This is happening because the components are loaded each time, causing the form to reset.

My goal is to allow users to fill out all the necessary information in each component before submitting all the data with just one click.

Thank you for your help in advance.

Answer №1

It is recommended to initialize three variables in your ResumeComponent: personalInfo, educationalInfo, and experienceInfo. These variables should then be passed as input to the corresponding child components: PersonalInfoComponent, EducationalInfoComponent, and ExperienceComponent. By storing form data in these child components and emitting an event on ngDestroy to send the data back to the parent component (ResumeComponent), you can ensure that your data is not lost when moving between components. I trust this information proves to be useful to you. :)

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

Personalize your Stackblitz Angular project template

Currently, I am in the process of forking and customizing the Stackblitz Angular CLI project template which can be found at github.com/stackblitz/angular-cli-template. The main goal here is to adjust the TypeScript configuration by changing the target fro ...

Bring in typings from a package with an alternate title

I have a project that I am currently converting to typescript. In this project, I am using the package ng-idle. Additionally, there is a corresponding @types package named angular-idle, which contains the file @types/angular-idle/index.d.ts with the follow ...

Angular 2 or more variable binding

In this demonstration, only the unit-object will be saved: <select id="unit" name="unit" #unit="ngModel" class="form-control" [(ngModel)]="iu.unit" (change)="onDropdownChangeUnit($event)"> <option *ngFor="let i of UI_Units" [ngV ...

Ways to implement a filter pipe on a property within an array of objects with an unspecified value

Currently, I'm tackling a project in Angular 8 and my data consists of an array of objects with various values: let studentArray = [ { Name: 'Anu', Mark: 50, IsPassed: true }, { Name: 'Raj', Mark: 20, IsPassed: false }, { Na ...

Angular integration with Keycloak

Currently working on a project involving microservices in Spring Boot. I have implemented security for the backend using Keycloak with secret credentials and OAuth2. Testing this setup using Postman has been successful. However, when trying to build the U ...

Tips for sending a value to a container component

Within my task management application, I have implemented two selectors: export const selectFilter = (state: RootState) => state.visibilityFilter export const selectVisibleTodos = createSelector( [selectTodos, selectFilter], (todos: Todo[], filter : ...

Apache ECharts is throwing an error due to incompatible types of the 'trigger' property

I am experimenting with setting up some options in this demonstration, and here is what I have managed to achieve so far. testOptions: EChartsOption = Object.assign( {}, { backgroundColor: 'red', tooltip: { trigger: ...

Lazy-loaded modules in Angular that contain services provided within the module

Currently, I am facing a challenge with lazy-loaded modules and services that are provided in these modules. My folder structure looks like this: app -> featureModule1 (lazy loaded) -> featureModule2 (lazy loaded) -->services --->servi ...

Verification of custom data type validation

I am puzzled by the behavior of this custom type state: interface DataType { [key: string]: string;} const [data, setData] = React.useState<DataType>({}); When I attempt to execute console.log(data === {}) It surprisingly returns false. Why ...

Advantages of passing individual variables instead of the entire object from HTML to JavaScript in AngularJS

When it comes to passing the iterating object from HTML to Javascript, there are two approaches that can be taken. The first approach involves passing the iterating object as a whole, while the second approach only passes the required properties of the obj ...

Can Primeng and Angular2 be integrated into JSF without the use of npm?

I'm looking to implement the Angular2 framework for my frontend development, and I've decided to use PrimeNG for the UI components. However, I am not familiar with how npm functions. Here are some tech details: I will be using Eclipse or NetBe ...

How to extract a type from a nested type using TypeScript

I am trying to define a type structure where both a and foo are optional: type Something = { a?: { foo?: { bar: { c: { id: string, countryCode: number, animal: { ... } } } } } } Now I n ...

Encountering an unusual behavior with React form when using this.handleChange method in conjunction

RESOLVED I've encountered a quirky issue with my React/Typescript app. It involves a form used for editing movie details fetched from a Mongo database on a website. Everything functions smoothly except for one peculiar behavior related to the movie t ...

What does the 'key' parameter represent in the s3.put_object() function?

Currently, I'm utilizing Boto in my project to upload artifacts to an s3 bucket. However, I am uncertain about the usage of the Key parameter within the put_object() method: client.put_object( Body=open(artefact, 'rb'), Bucket=buc ...

What steps should be taken to gain access to the FormController if the form is contained within a directive?

Here is the code for my custom directive: restrict: 'E', scope: { }, templateUrl: 'directives/my.directive.html', link: function(scope) { // I want to be able to access "myForm" here (e.g., to setPristine(), etc.) scope.custom ...

Implementing intelligent parameter type enforcement according to configuration settings

I can't decide on a name for this concept, so please be patient while I explain it. There are three configuration objects: const configA = { type: 'A' as const, getPath: (query: { foo: string }) => `/${query.foo}` } const config ...

How can we verify that console.log has been called with a specific subset of expected values using Jest?

I am currently experimenting with a function that adds logging and timing functionality to any function passed to it. However, I am facing a challenge when trying to test the timing aspect of it. Here are my functions: //utils.js export const util_sum = ( ...

The ElementRef was modified following the activation of a click event

Let me explain my current situation: I am working with 3 components: MainComponent, ComponentA, and ComponentB. MainComponent dynamically loads ComponentA. ComponentA contains a button that, when clicked, calls MainComponent.addComponent(ComponentB). exp ...

Tips for bundling and inlining .json files within an Angular npm package

I am currently in the process of developing an NPM Package for an Angular module that I intend to utilize across several Angular applications. The Angular module I have developed relies on ng2-translate to access localization strings stored in .json file ...

Arranging a 2D array of matchups to ensure an equal distribution of home and away matches for each team

I am in the process of developing a unique UEFA Champions League 24 'Swiss Model' tournament with 36 teams. Each team is set to compete against 8 different opponents, resulting in a total of 144 matches. I already have a list of matchups prepared ...