How to pass json object one component to another component in angular?

Question

How to pass JSON object one component to another component. I have two components LoginView and ProfileView. I got particular user details in LoginView component. I want to pass this.result and this.studentresult to ProfileView component, basically after login I am trying to pass user details to user profile page. How can I do this, help me out, I am new to angular.

i gone through How to send a value from one component to another?

but in my case i want to call 3 api's in LoginView component and i need to pass all these api result to ProfileView component

LoginView component

export class LoginView {      
    constructor(private http: HttpClient, private router: Router) {}      
    ngOnInit() {}      
    this.http.get('http://localhost:8080/user/1')
        .subscribe((response: any) => {
                this.result = response;
            }    
        }
     this.http.get('http://localhost:8080/student/1')
        .subscribe((response: any) => {
                this.studentresult = response;
            }    
        }

}

ProfileView component

export class ProfileView {    
  constructor() { }
  ngOnInit() {}    
}

Answer 1

You can create a Shared Service, set a variable on LoginView and read it on ProfileView.

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

@Injectable()
export class SharedService{
    userData;
    constructor(){
      this.userData= {};
    }
    setUserData(val: object){
      this.userData= val;
    }
    getUserData(){
      return this.userData;
    }
}

LoginView component

export class LoginView {

  constructor(private http: HttpClient, private router: Router, private sharedService: SharedService) { }

  ngOnInit() {
  }
  this.http.get('http://localhost:8080/user/1')
      .subscribe((response:any) => {
        this.result = response;
        this.sharedService.setUserData(response);
       }
}

ProfileView component

export class ProfileView {

  constructor(sharedService: SharedService) {
  console.log(sharedService.getUserData());
  }
  ngOnInit() {}

}

Answer 2

Use Observable.forkJoin for your requests and then use a shared service to pass the data between the components. I like to use BehaviorSubjects to share data between components that are not related in any way....

Service:

// behaviorsubject wants an inital value
private mySubject = new BehaviorSubject([]);
public mySubject$ = this.mySubject.asObservable();

setValue(value) {
  this.mySubject.next(value);
}

Provide this service at module level, not component.

And then as said, use Observable forkjoin to execute the requests in parallel. That produces an array of your result with content in the order you provided, which you can pass to your other component through your service:

(case: not using pipeable operators):

let user = this.http.get('http://localhost:8080/user/1');
let student = this.http.get('http://localhost:8080/student/1');

Observable.forkJoin([user, student]).subscribe(data => {
   this.myService.setValue(data);
});

Then in your other component you subscribe to the observable:

this.myService.mySubject$.subscribe(data => {
  this.user = data[0];
  this.student = data[1];
});