title: angular2 - passing data object between components
body: <p>Looking for some help, if possible.</p>
  
  <p>I have a data object located in one component, received from a REST call. It contains user details that I would like to share across components, but I am having trouble.</p>
  
  <p>What is the best way to pass this object over to another component, so I can use the details?</p>
  
  <p>Ex. The data object is named user, and I want to share the user._id created from the database and received from the REST call with a separate component.</p>
  
  <p>Thanks everyone for any help.</p>
  
  <p><strong>COMPONENT ONE (contains user data object):</strong></p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {ROUTER_DIRECTIVES, Router, Location} from 'angular2/router';
  import {Control, FORM_DIRECTIVES, NgIf} from 'angular2/common';
  import {UserLogin} from './navbar.login.service';
  import {LoginService} from './navbar.login.service';
  import {AccountDataService} from '../account/account.data.service';
  import {User} from '../account/account.model';
  
  @Component({
  selector: 'navbar',
  templateUrl: './app/navbar/navbar.component.html',
  directives: [ROUTER_DIRECTIVES],
  providers: [LoginService, AccountDataService]
  })
  
  export class NavbarComponent {
  
  model: UserLogin;
  user: User;
  message: string;
  
  constructor(private _service: LoginService, public _userService: AccountDataService,
      private router: Router, private location: Location) {
      this.model = this._service.modelInstance();
      this.user = this._userService.modelInstance();
  }
  
  onSubmit() {
  
      this._service.rawPost('?username=' + this.model.userName
          + '&amp;password=' + this.model.password)
          .subscribe(res =&gt; {
              if (res.status === 200) {
                  this.message = 'You have been logged in with: ' + this.model.userName;
                  this.router.navigate(['Dashboard']);
                  this._userService.read('/username/' + this.model.userName)
                      .subscribe(user =&gt; {
                          this.user = user; // &lt;--- NEED THIS OBJECT PASSED AND SHARED!!
                  })
                      });
              } else {
                  this.message = 'Username or Password is not correct';
              }
          },
          error =&gt; {
              console.log("Response = %s", JSON.stringify(error));
              if (error.status == 401) {
                  this.message = 'Username or Password is not correct';
              }
          });
  
  }
  
  toggleMenu() {
      this.menuActive = !this.menuActive;
  }
  
  logout() { //NOT SURE ABOUT THIS!!!
      // clears browser history so a user can't navigate with back button
      // this.location.replaceState('/');
      this.router.navigate(['Home']);
  }
  </code></pre>
  
  <p><strong>COMPONENT TWO Needs adjusting. Can't get the user object above to pass in. Not even sure where to start at this point.</strong></p>
  
  <pre><code>import {Component, OnInit} from 'angular2/core';
  import {UserCase} from './case/case.model';
  import {User} from '../account/account.model';
  import {ROUTER_DIRECTIVES} from 'angular2/router'; 
  import {AccountDataService} from '../account/account.data.service';
  import {NavbarComponent} from '../navbar/navbar.component';
  
  @Component({
  selector: 'dashboard',
  templateUrl: './app/dashboard/dashboard.component.html',
  directives: [NavbarComponent],
  providers: [ROUTER_DIRECTIVES, AccountDataService],
  })
  
  export class DashboardComponent implements OnInit {
  
  public user: User;
  public userCase;
  public userCases: UserCase[] = []
  
  ngOnInit() {
      // Also trying to get each userCase object into the userCases array (not currently working)
  
      this._caseService.read('/user/' + this.user._id) //this.user not currently defined.
          .subscribe(userCase =&gt; {
              this.userCase = userCase;
          });
  
      this.userCases.push(this.userCase);
  }
  
  constructor(private _caseService: CaseDataService, private _userService: AccountDataService) {
      this.user = this._userService.modelInstance();
      this.userCase = this._caseService.modelInstance();
      this.userCases = [];
  }
  
  }
  </code></pre>