Is there a way to maintain formdata between components in Angular?

Question

Is there a way to maintain formdata between components in Angular?

With only the tools of @Input, @Output, routing, and activatedRoute at my disposal, I set out to create a dynamic application.

In this project, there are two crucial components: addbook and showbook.

The addbook component features a form with a submit button designed to store all the entered data upon submission.

Meanwhile, the showbook component is responsible for displaying the saved form data.

Both components are neatly integrated within a navigation bar consisting of anchor tags. One leads to the addbook component where users can input their data which should be saved upon submission. The other directs users to the showbook component where they can view the stored form data.

To achieve this functionality, I have implemented a template-driven form that triggers a function on submission:

this.route.navigate(['showbook', bookID])

Furthermore, I configured the route path as 'showbook/:id' and associated it with the showbook component using RouterModule.forRoot([routes]). Within the showbook component, activatedRoute was utilized to extract and display the form data by retrieving the parameters.

RouterModule.forRoot([{path:'showbook/:id',component:showBookComponent}]) // in app module ts

this.activatedRoute.params.subscribe(params=>{
this.bookId = params['id']
})

Despite successfully displaying the form data upon submission, my current solution fails to save the data persistently. The requirement stipulates that the data must be saved until accessed via the showbook component without relying on local storage implementation.

javascript angular typescript

Answer 1

Answer №1

If you want to store and retrieve data, you can utilize the service.

Once the form in addbook is completed and saved, save the data in the service.
When you visit showbook, fetch the data from the service.

For instance:

data.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  formData: Object;

  constructor() { }

  // Set the value
  setFormData(data){
    this.formData = data;
  }

  // Get the value
  getFormData(){
    return this.formData ;
  }
}

In addbook.component.ts

Start by importing the service.

import { DataService } from '../../data.service';

Inject the service in your constructor

constructor(private dataService: DataService){}

In your save button function

this.dataService.setFormData(data);

In showbook.component.ts

Begin with importing the service.

import { DataService } from '../../data.service';

Inject the service in your constructor

constructor(private dataService: DataService){}

Show the form data in the init function

 ngOnInit(): void {
    this.formData = this.dataService.getFormData();
  }

Answer 2

If you want to store and retrieve data, you can utilize the service.

Once the form in addbook is completed and saved, save the data in the service.
When you visit showbook, fetch the data from the service.

For instance:

data.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  formData: Object;

  constructor() { }

  // Set the value
  setFormData(data){
    this.formData = data;
  }

  // Get the value
  getFormData(){
    return this.formData ;
  }
}

In addbook.component.ts

Start by importing the service.

import { DataService } from '../../data.service';

Inject the service in your constructor

constructor(private dataService: DataService){}

In your save button function

this.dataService.setFormData(data);

In showbook.component.ts

Begin with importing the service.

import { DataService } from '../../data.service';

Inject the service in your constructor

constructor(private dataService: DataService){}

Show the form data in the init function

 ngOnInit(): void {
    this.formData = this.dataService.getFormData();
  }

Is there a way to maintain formdata between components in Angular?

Answer №1

Similar questions

Eliminate server-side functionality from the React project's boilerplate template

Unusual behavior observed during npm update operation

The Photoswipe default user interface cannot be located

Retrieve the array from the response instead of the object

Tips for extracting header ID from the HTML/DOM using react and typescript

How can I ensure a successful redirect to react-router root path after saving to MongoDB in Express?

Utilizing withRouter outside a component to navigate through historical data

Filtering text for highlighting in Vue.js is a breeze

What is the reason behind the default disabling of bootstrap multiselect options?

Load all components in advance when implementing lazy loading for individual components in routing

Analyzing elements within an array of objects

Starting an AngularJS module without an HTML page may seem like a daunting task,

Tips for streamlining the filter function using replace and split:

Hide form data upon submission

Switching a Rails/Ajax form from create to update mode upon submission

Summing Values with Linq.js Filter

Having trouble with a Reactjs Facebook login library - update the componentClicked function to be async

Enhancing jQuery UI elements (Customizing jQuery Datepicker to prevent incorrect entries)

deployJava.js injects a new <embed> element into the header section of the webpage

Toggle the visibility of table rows using checkboxes