Nrthugu

I am trying to route one component to another; each component has some form data (this.formBuilder.group). while I navigate from one component to another, if I come back to the previous component, the filled data is not restored.

Is that any way to save the data before routing for each component? Is there any lifecycle method is there to detect before leaving the component to save all form data?

navigation.ts:

    if(currentNav == "Personal Details"){

      this.router.navigateByUrl('/understand/personal');

    } else if(currentNav == "Contact Details"){

      this.router.navigateByUrl('/understand/contact');

    }



contact.ts

ngOnInit() {

    this.contactDetails = this.formBuilder.group({

      email: ['', [Validators.required, Validators.email]],

      mobileNumber: ['', Validators.required],

      secondaryNumber: ['', Validators.required]

   });

  }



personal.ts

    this.personalDetails = this.formBuilder.group({

      country: ['', Validators.required],

      countryOfIssue: ['', Validators.required],

      countryOfBirth: ['', Validators.required]

       });

      }

Persist the data captured in each component in a global service and restore the same when moving back and forth. You can assign the global service object in your constructor or ngOnInit method. Something like below:

home.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { GlobalService } from'../global.service';



@Component({

  selector: 'app-home',

  templateUrl: './home.component.html',

  styleUrls: ['./home.component.css']

})

export class HomeComponent implements OnInit, OnDestroy {

  homeDetails: FormGroup;



  constructor(private formBuilder: FormBuilder,private globalService: GlobalService) {



    this.homeDetails = this.formBuilder.group({

      homename:['', Validators.required]

    });



   }



  ngOnInit() {

      if(this.globalService.homeDetails){

        this.homeDetails = this.globalService.homeDetails;

      }

  }





  ngOnDestroy() {

    this.globalService.homeDetails = this.homeDetails;



  }



}

global.service.ts

import { FormGroup } from '@angular/forms';

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



@Injectable()

export class GlobalService {

  public homeDetails: FormGroup;

  public aboutDetails: FormGroup;

}

You can look at OnDestroy to implement any code before moving to another component.

Updated: Code for home.component.ts and global.service.ts as per the stackblitz url

Instead of lifecycle methods, you can probably decide to use CanDeactivate Route Guard on exiting component, which give you ability to add features such as save and cancel. For info try https://v5.angular.io/guide/router#candeactivate-handling-unsaved-changes.