How to add navigation without destroying component data in angular 8?

Question

I'm setting up a new app consisting in three components. The first one is a form, submitting it I store the data in a singleton service and then navigate to the second component. Clicking a button on this second component I navigate to the third one where should be displayed the data submitted in the form. But those data gets destroyed during navigation, even if I jump the second component. When the two component where both displayed on the page, the data were printed normally via string interpolation. I thought that the service, being a singleton and on the app.component level, should store those data even after the component destruction but it doesn't.

So my question is, is there a way to save the data even after the first component destruction?

I'll attach the .ts file of the form-component, the service and the output component without the navigation to the middle component.

Form.component.ts:

import { Component, OnInit, ViewChild, } from '@angular/core';
import { userDataService } from '../shared/user-data.service';
import { NgForm } from '@angular/forms';
import { User } from '../shared/user.model';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home-form',
  templateUrl: './home-form.component.html',
  styleUrls: ['./home-form.component.css']
})

export class HomeFormComponent implements OnInit {


 @ViewChild('myForm', { static: false }) userForm: NgForm;

  constructor(private userData: userDataService,
              private router: Router) {}

  ngOnInit() {
  }

  onSubmit(){
    const newUser = new User(this.userForm.value['name'], this.userForm.value['surname'], this.userForm.value['gender'], this.userForm.value['email']);
    this.userData.addUser(newUser);
    this.userForm.reset();
    this.router.navigate(['/user']);
  }
}

user-data.service.ts

import { User } from './user.model';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({providedIn: 'root'})

export class userDataService {

    private myUser = new Subject<User>();
    myUserObservable = this.myUser.asObservable(); 

    addUser(user: User){
        this.myUser.next(user);
    }
}

user-profile.component.ts

import { Component, OnInit } from '@angular/core';
import { userDataService } from '../shared/user-data.service';
import { User } from '../shared/user.model';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css'],
})
export class UserProfileComponent implements OnInit {
  user: User = {
    name: '',
    surname: '',
    gender: '',
    email: ''
  }


  constructor(private userData: userDataService) {}

  ngOnInit() {
    this.userData.myUserObservable.subscribe(
      (user: User) => {
        this.user = user;
      }
    );
  }
}

can you create a demo over stackblitz? – Vivek Doshi Aug 07 '19 at 19:51 — Vivek Doshi, Aug 07 '19 at 19:51

score 0 · Accepted Answer · answered Aug 07 '19 at 20:08

0

First of all, data is not being destroyed,

This is how Subject works , in your case you can use BehaviorSubject

So change from :

private myUser = new Subject();

To :

private myUser = new BehaviorSubject(null);

WORKING DEMO

For testing open user.service.ts

Try both method one by one private myUser = new Subject(); private myUser = new BehaviorSubject(null);

For More Detail : DO READ

answered Aug 07 '19 at 20:08

Vivek Doshi

56,649
12
110
122

Hi vivek, sorry for the late answer. Anyway, your solution worked, thank you!! – Zxcid Aug 14 '19 at 18:53

How to add navigation without destroying component data in angular 8?

1 Answers1