javascript - How do I persist formdata from one component to another in angular?

Question

All I had to use was @Input, @output, routing, activated route.

There are 2 components, namely addbook and showbook. addbook component has a form with a submit button, which is supposed to save all the form data.

showbook component should just display the formdata.

These two components are placed in an a navbar of anchor tags. One is addbook anchor, which displays the form, and when you submit the form, it should persist the data (save it).

Finally, when you click on the show book anchor tag, it should display the formdata.

What I have come up with - I've used a template driven form which when submitted invokes a

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

Now I have imported the path as showbook/:id and component as showbook in routerModule.forRoot([routes]), in the showbook component, I have used activatedRoute to get the params, and using this, I have displayed the form data.

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

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

My code displays the formdata as soon as it is submitted, though the requirement is that I should save the data, and when showbook is clicked the formdata should be displayed.

I am not allowed to use local storage.

question from:https://stackoverflow.com/questions/66047487/how-do-i-persist-formdata-from-one-component-to-another-in-angular

Answer 1

You can use service for this purpose.

1. After the form is filled up in addbook and saved, store the data in service.
2. When you navigate to showbook, retrieve the data from service.

Example:

data.service.ts

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

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

  constructor() { }

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

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

In addbook.component.ts

First import the service.

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

Inject the service in your constructor

constructor(private dataService: DataService){}

On your save button function

this.dataService.setFormData(data);

In showbook.component.ts

First import the service.

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

Inject the service in your constructor

constructor(private dataService: DataService){}
 

Display the form data on init function

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