title: One form three pages. How to pass state between them?
body: <p><strong>My goal:</strong><br>
  I want to let the user to create a new object, let's say a car. It is divided into three steps/pages/views:</p>
  
  <ol>
  <li>Information about the car - form with inputs (First page <code>&lt;app-car-create-page1&gt;&lt;/app-car-create-page1&gt;</code>) </li>
  <li>Information about the current owner - form with inputs (Second page <code>&lt;app-car-create-page2&gt;&lt;/app-car-create-page2&gt;</code>)</li>
  <li>Information about the new owner - form with inputs (Third page <code>&lt;app-car-create-page3&gt;&lt;/app-car-create-page3&gt;</code>)</li>
  </ol>
  
  <p><strong>The problem:</strong><br>
  How to pass form data from <code>app-car-create-page1</code> to <code>app-car-create-page2</code> and from <code>app-car-create-page2</code> to <code>app-car-create-page3</code> ?</p>
  
  <p><strong>My apporaches:</strong><br>
  For me the easiest way was to use <code>state</code> object and implent it this way:<br><br>
  <em>Page1</em></p>
  
  <pre><code>@Component({
    selector: 'app-car-create-page1',
    templateUrl: './car-create-page1.component.html',
    styleUrls: ['./car-create-page1.component.scss']
  })
  export class CarCreatePage1Component implements OnInit {
  
    carInformationFormGroup = this.fb.group({
      brand: [''],
      model: [''],
      mileage: ['']
    });
  
    constructor(private fb: FormBuilder, private router: Router) {
    }
  
    ngOnInit() {
    }
  
    private navigateToNextPage() {
      this.router.navigateByUrl('/cars/create?pageNr=2',
        {state: {page1FormData: this.carInformationFormGroup}});
    }
  }
  </code></pre>
  
  <p><br><em>Page 2</em></p>
  
  <pre><code>@Component({
    selector: 'app-car-create-page2',
    templateUrl: './car-create-page2.component.html',
    styleUrls: ['./car-create-page2.component.scss']
  })
  export class CarCreatePage2Component implements OnInit {
  
    private state$: Observable&lt;object&gt;;
  
    constructor(private router: Router) { }
  
    ngOnInit() {
      this.state$ =  this.router.events.pipe(
        filter(e =&gt; e instanceof NavigationStart),
        map(() =&gt; this.router.getCurrentNavigation().extras.state)
      );
  
  
    }
  }
  </code></pre>
  
  <p>What gives me:<br></p>
  
  <pre><code>ERROR Error: Uncaught (in promise): DataCloneError: Failed to execute 'pushState' on 'History': function () { return _this._updateDomValue(); } could not be cloned.
          Error: Failed to execute 'pushState' on 'History': function () { return _this._updateDomValue(); } could not be cloned.
              at BrowserPlatformLocation.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.BrowserPlatformLocation.pushState (platform-browser.js:610)
              at PathLocationStrategy.push../node_modules/@angular/common/fesm5/common.js.PathLocationStrategy.pushState (common.js:498)
  (...)
  </code></pre>
  
  <p>according to other online posts, it's related to the problem with serialization. What probably could solve a problem is <a href="https://www.npmjs.com/package/safe-json-stringify" rel="nofollow noreferrer">safe json stringify</a>.<br><br>
  Another solution to my main problem is to use <a href="https://www.npmjs.com/package/ngx-navigation-with-data" rel="nofollow noreferrer">ngx-navigation-with-data</a>.
  <br><br>
  And truth be told, I am the beginner at the frontend so it's not easy for me to make a right decision, hence my question.</p>
  
  <ol>
  <li>Is my approach even correct for that case ?</li>
  <li>What should I do to pass form data from one component to another ?</li>
  <li>I've read about the approach with creating a service class, that is supposed to be injected in both components and get data from there. But that is definitely not for my case.</li>
  </ol>